google maps - custom - Google Map Infowindow no se muestra correctamente

infowindow style google maps v3

Question

La ventana de información no se muestra correctamente en mi mapa al hacer clic en un marcador. El sitio web está aquí.

También notará que el control del mapa tampoco se muestra correctamente.

 var map;
var locations = <?php print json_encode(di_get_locations()); ?>;
var markers = []
jQuery(function($){
var options = {
center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
for (var i=0; i < locations.length;i++) {
makeMarker(locations[i]);
}
centerMap();
});
function makeMarker(location) {
var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
var content = '''';
var infowindow = new google.maps.InfoWindow(
{ content: "test",
size: new google.maps.Size(50,50),
disableAutoPan : true
});
google.maps.event.addListener(marker, ''click'', function(e) {
infowindow.open(map,marker);
});
}
function centerMap() {
map.setCenter(markers[markers.length-1].getPosition());
}

Nota: estoy usando Google Maps JS V3.

Answer 1

El problema está forzado por este formato dentro de style.css:

img {
height: auto;
max-width: 100%;/* <--the problem occurs here*/
}

Agregue esto al final de su style.css para aplicar el valor predeterminado para las imágenes dentro del mapa:

#map_canvas img{max-width:none}

Answer 2

El problema puede ser que estés usando img{ max-width: 100%; } img{ max-width: 100%; } como universal.

Prueba esto en tu css

.gmnoprint img {
max-width: none;
}

Answer 3

En el caso de Magento, los controles de zoom del mapa de google no se mostraban debido a un conflicto con la biblioteca PROTOTIPO.

Answer 4

He intentado la mayoría de las respuestas de Internet, pero eso no es útil (no funciona), he añadido css personalizados y el control de zoom del mapa están visibles, también habilito el clic del marcador. Esta respuesta también es útil para esta pregunta

.gmnoprint{ display: block !important } .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom { display: block !important; } .gm-tilt { display: none; } .gm-iv-address{ height: 56px; }

Answer 5

Resolví el problema con:

.gmnoprint img {
max-height: none;
}

en lugar de max-width

Gracias