Google Map Infowindow no se muestra correctamente

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

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.

Fuente

2012-03-12 Jenny

Ya no hay un enlace a su sitio web, por lo que no está claro qué problema tiene. Su pregunta tal como está es poco probable que ayude a los usuarios en el futuro. –

También puede ser un problema similar al descrito aquí: http://stackoverflow.com/questions/1554893/google-maps-api-v3-infowindow-not-sizing-correctly –

La cuestión es forzado por este formato dentro style.css:

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

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

#map_canvas img{max-width:none}

Fuente

2012-03-12 09:30:44

¡Gracias! Funcionó. ¡Muchas gracias por curar mi dolor de cabeza también! – Jenny

Esto lo resolvió para mí también. Si alguien quiere saber cómo se ve, visite http://i.stack.imgur.com/Bl8ci.png –

. Era bastante obvio, pero me ahorra una gran cantidad de tiempo. Gracias amigo. –

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

intente éste a su css

.gmnoprint img { 
    max-width: none; 
}

Fuente

2014-02-25 17:00:41 Muhammed

¿Por qué publicar lo mismo que la respuesta aceptada más de 1 año después? – 0x1gene

@ 0x1gene el motivo por el cual 'img {max-width: 100%}' afectará a otras propiedades CSS del proyecto. Al mismo tiempo '.gmnoprint img: {max-width: none; } 'no va a afectar ninguna propiedad. – Muhammed

Tienes razón al igual que '' '#map_canvas img {max-width: none}' '' does ... – 0x1gene

En los controles de zoom del mapa Magento caso de Google no se muestra debido a un conflicto con la biblioteca de prototipo.

Fuente

2014-10-02 12:40:45 Paktas

me resolvió el problema:

.gmnoprint img { 
    max-height: none; 
}

en lugar de max-width.

Gracias

Fuente

2017-08-22 17:12:07 Vlad

Google Map Infowindow no se muestra correctamente

Respuesta

Cuestiones relacionadas