css - tutorial - google maps marker example
Herramientas de API de Google Maps: ¿distorsiones visuales? (3)
Me acabo de dar cuenta de que las herramientas gMap view se muestran ... bastante inusualmente. Sus regiones todavía parecen estar bien definidas, puedo interactuar con ellas muy bien, es solo su aspecto lo que parece arruinado.
No he aplicado ningún CSS a ninguna de las piezas del mapa, y la única CSS que he aplicado al contenedor del mapa es width:100%; height:100%; z-index:0; width:100%; height:100%; z-index:0; (que normalmente hago).
Tengo otros elementos en la página que tienen una position:absolute; y position:fixed; y algunos altos z-index s (500 y 1000). ¿Es posible que estén causando la distorsión visual de las herramientas del Mapa?
Veo la misma distorsión visual extraña en las últimas versiones de Chrome, Chrome Canary, Ffx, Safari y Opera (en Mac OSX).
Revisé las herramientas de desarrollo / firebug, y no se aplica CSS inesperado al contenedor del mapa o directamente a sus herramientas.
Aquí está el HTML exacto (eliminé los demás elementos y css y todavía ocurre la rareza):
<html style="width:100%;height:100%;">
<head>
<link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
<link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
<script
type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=...">
</script>
<script type="text/javascript">
function ginit() {
var vancouver = new google.maps.LatLng(49.285415,-123.114982);
var mapOptions = {
center: vancouver,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
var infowindow = new google.maps.InfoWindow(),
marker;
}//ginit()
</script>
</head>
<body onload="ginit();" style="width:100%;height:100%;">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
EDITAR : Parece que el problema proviene de la combinación de Foundation y Bootstrap: la eliminación de uno de ellos soluciona el problema. Además, no importa que no haya elementos en las clases de referencia de página de las librerías, causa la distorsión de todos modos.
Intenté poner esto en un violín, pero no pude cargar jsfiddle.net.
Bootstrap y Foundation establecieron { img max-width:100% } para lienzos de Google Maps. Esto hace que los controles de Maps aparezcan descodificados. Altere el CSS para que sea max-width:none; . [ source ]
Advertencia : Aparentemente img { max-width: 100% … } es integral para el cambio de tamaño automático de las imágenes para diseños con capacidad de respuesta, por lo que debe usarse con precaución. [ source ]
Foundation 5 no solo rompe gmap, también rompe MapQuest. Afortunadamente, tanto Goomap como Quest tienen clase que nos permite sobrecargar el comportamiento de F5 solo para la visualización de mapas.
.google-map {
height: 400px; // no default height
color: #191970; // default color for both text and background is white !!!
}
.quest-map {
height:400px;
color: #191970;
}
// Fix Foundation bug with MapQuest
.mqa-display {
img {max-width: none;}
label { width: auto; display: inline; }
}
// Fix Foundation bug with GoogleMap
.gm-style {
img { max-width: none; }
label { width: auto; display: inline; }
}
Para los futuros usuarios que enfrentan el mismo problema, esta es la solución.
#map img{max-width: inherit;}
Al igual que otras respuestas, dijo que es un problema con el ancho máximo.