7
Es ist ein known bug, dass die Google Maps API die Scrollbar für die erste (Zeit) zeigt geklickt Infofenster,Google Maps Infowindow Scrolling Bug: Wie für alle Fälle lösen?
Das Problem, das erste Mal:
Erholung der Zeit:
So habe ich found out, dass das Hinzufügen maxWidth das Problem gelöst,
Für mich ist es nicht; Wenn ich setze die maxWidth auf 200px, die Scrollbar verschwindet, aber seine kleine, als ich brauche,
Wenn ich gesetzt 250px (Größe ich brauche), bleibt die Scrollbar
Irgendeine Idee, was könnte ich versuchen?
jsfiddle: http://jsfiddle.net/e0x20tvs/3/
$sescam_ventana = {
init: function() {
this.mapa();
},
mapa: function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=$sescam_ventana.mapSetup';
document.body.appendChild(script);
},
mapSetup: function() {
var styles = [
/*
\t \t \t {
\t \t \t \t stylers: [
\t \t \t \t \t { saturation: -100 }
\t \t \t \t ]
\t \t \t },{
\t \t \t \t featureType: "road",
\t \t \t \t elementType: "geometry",
\t \t \t \t stylers: [
\t \t \t \t \t { visibility: "simplified" }
\t \t \t \t ]
\t \t \t },{
\t \t \t \t featureType: "poi.business",
\t \t \t \t elementType: "labels",
\t \t \t \t stylers: [
\t \t \t \t \t { visibility: "simplified" }
\t \t \t \t ]
\t \t \t }
\t \t */
];
var styledMap = new google.maps.StyledMapType(styles, {
name: "SESCAM"
}); //
var mapOptions = {
zoom: 16,
scrollwheel: false,
center: new google.maps.LatLng(39.6177074, 4.9725879),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
}
var handleMarkerClick = function(marker, index) {
var $navigationMenu = jQuery('<div>');
jQuery('.menu-item').each(function(i) {
var $button = jQuery('<button>');
$button.text(jQuery(this).text());
$button.addClass(jQuery(this).data('class'));
$navigationMenu.append($button);
});
if (typeof infowindow === 'undefined') {
infowindow = new google.maps.InfoWindow({
height: 380
});
}
var centro = infoCentros[index] //helpful data
infowindow.setContent(
'<div class="sescam-info-window">' +
'<h3>' + centro.nombre + '</h3>' +
'<p>' + centro.lugar + '</h3>' +
'<p class="titulo">Coordinador</p>' +
'<p><strong>' + centro.coordinador.nombre + '</strong></p>' +
'<p><a href="mailto:' + centro.coordinador.email + '">' + centro.coordinador.email + '</a></p>' +
'<p class="titulo">Responsable</p>' +
'<p><strong>' + centro.responsable.nombre + '</strong></p>' +
'<p><a href="mailto:' + centro.responsable.email + '">' + centro.responsable.email + '</a></p>' +
'<div class="menu">' + $navigationMenu.html() + '</div>' + '</div>'
);
infowindow.open(marker.getMap(), marker);
}
var handleMenu = function() {
jQuery('body').on('click', '.menu button', function() {
var itemClass = jQuery(this).attr('class');
jQuery('.listado.' + itemClass).stop(true, true).slideDown().siblings('.listado').stop(true, true).slideUp();
});
}
this.gmap = new google.maps.Map(document.getElementById('mapa'), mapOptions);
this.gmap.mapTypes.set('map_style', styledMap);
this.gmap.setMapTypeId('map_style');
this.mapMarkers = [];
this.mapInfoWindow = new google.maps.InfoWindow({
height: 380
});
jQuery(window).resize(function() {
$sescam_ventana.gmap.fitBounds($sescam_ventana.mapBounds);
});
for (var i = 0; i < this.mapMarkers.length; i++) {
// primero eliminamos todos los markers que pudiera haber de una visualización anterior
this.mapMarkers[i].setMap(null);
}
this.mapMarkers.length = 0; // reseteamos el array
this.mapBounds = new google.maps.LatLngBounds();
var c = 0; // de inicio no sabemos cuantos elementos tienen realmente latitud y longitud, este contador nos lo chivará
var latlon; // lo guardamos fuera del each para poder verlo después, si resulta que es el único elemeto a mostrar
for (var i = 0; i < infoCentros.length; i++) {
var centro = infoCentros[i];
var lat = centro.cordenadas.lat;
var lon = centro.cordenadas.long;
if (lat && lon) {
c++;
latlon = new google.maps.LatLng(lat, lon);
var moptions = {
position: latlon,
map: $sescam_ventana.gmap
}
moptions.icon = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/256/Map-Marker-Marker-Outside-Pink-icon.png';
var marker = new google.maps.Marker(moptions);
$sescam_ventana.mapMarkers.push(marker);
//google.maps.event.addListener(marker, 'click', handleMarkerClick);
google.maps.event.addListener(marker, 'click', handleMarkerClick.bind(undefined, marker, i));
$sescam_ventana.mapBounds.extend(latlon);
}
}
if (c > 1) {
$sescam_ventana.gmap.fitBounds(this.mapBounds);
} else {
// si solo hay uno el fitbounds no hace un zoom ni un centrado correctos
$sescam_ventana.gmap.setCenter(latlon);
}
handleMenu();
}
}
jQuery(function() {
$sescam_ventana.init();
});.gmapa {
position: relative;
padding-bottom: 50%;
}
#mapa {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gmapa">
<script>
var infoCentros = [{
"nombre": "El nombre 0",
"texto": "Lorem ipsum sit met hamet amid0",
"lugar": "Toledo",
"coordinador": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"responsable": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"cordenadas": {
"lat": 39.150544196,
"long": -4.8019412125
}
}, {
"nombre": "El nombre 1",
"texto": "Lorem ipsum sit met hamet amid1",
"lugar": "Toledo",
"coordinador": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"responsable": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"cordenadas": {
"lat": 39.150544196,
"long": -4.7019412125
}
}, {
"nombre": "El nombre 2",
"texto": "Lorem ipsum sit met hamet amid2",
"lugar": "Toledo",
"coordinador": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"responsable": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"cordenadas": {
"lat": 39.150544196,
"long": -4.6019412125
}
}, {
"nombre": "El nombre 3",
"texto": "Lorem ipsum sit met hamet amid3",
"lugar": "Toledo",
"coordinador": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"responsable": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"cordenadas": {
"lat": 39.150544196,
"long": -4.5019412125
}
}, {
"nombre": "El nombre 4",
"texto": "Lorem ipsum sit met hamet amid4",
"lugar": "Toledo",
"coordinador": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"responsable": {
"nombre": "Ana M\u00aa del Mar Alonso Fern\u00e1ndez",
"email": "[email protected]"
},
"cordenadas": {
"lat": 39.150544196,
"long": -4.4019412125
}
}];
</script>
<div id="mapa"></div>
</div>
Gerade durch diese vor ein paar Monaten ging. FWIW, ich glaube, dass das Problem durch eine benutzerdefinierte Schriftgröße verursacht wurde, und das Zurücksetzen auf den Standard löste es. – Sparky