Google Maps no muestra

Tengo un mapa de Google que no se mostrará. El problema parece ser el mismo en FF & Chrome, pero aún más "malo" en IE (siempre la última versión).Google Maps no muestra

En FF & Chrome Tengo un problema con el estilo del elemento css position: relative;. Tan pronto como cambio a (con las herramientas de desarrollo) position: absolute(or: fixed);, todo se muestra bien en FF. En Chrome, el mapa solo muestra el 30% superior (desde arriba).

En IE, el mapa ni siquiera se carga.

Aquí está el material de script del <head>. El contenido es solo para probar y no significa nada. Nota: Solo uso esto para cargar el mapa. Esto será intercambiado más tarde.

<!-- Script inside <head> tag --> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js? 
     file=api&amp; 
     v=2&amp; 
     key=<?php echo self::GOOGLE_API_KEY; ?>&amp; 
     sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    function initialize() 
    { 
     var startpos = new google.maps.LatLng(50.978056,11.029167); 
     var ops = { 
      zoom:  6 
      ,center: startpos 
      ,mapTypeId: 
       google.maps.MapTypeId.ROADMAP 
       ,tileSize: new google.maps.Size(256, 256) 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), ops); 
     var pos1 = new google.maps.LatLng(50.7510776,12.4820724); 
     var contentString1 = '<div align="left" dir="ltr" class="infowin"><h3>test</h3>testen</div>'; 
     var infowindow1 = new google.maps.InfoWindow({ 
      content: contentString1 
      ,maxWidth: 5 
     }); 
     var marker1 = new google.maps.Marker({ 
      position: pos1 
      ,map:  map 
      ,title: 'test' 
     }); 
     google.maps.event.addListener(
      marker1 
      ,'click' 
      ,function() { 
       infowindow1.open(map, marker1); 
      } 
     ); 
    } 
    </script>

Ésta es la toda margen de beneficio para la página.

<!-- html markup - There *really* isn't anything else --> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%;"></div> 
</body>

He pasado mucho tiempo en Google sin encontrar nada. ¿Algunas ideas? ¡Gracias!

Fuente

2011-08-03 kaiser

html, body debería ser height:100%;.

Pero hay que tener en cuenta, si su elemento del mapa titular es un hijo de otro elemento de dicho indicador también debe tener height:100%;

De lo contrario, el establecimiento sólo el html y el cuerpo no le hará ningún bien.

un ejemplo para explicar mi punto:

<html> 
<head> 
    <style> 
     html, body { height:100%; } 
    </style> 
</head> 
<body> 

<div id="wrapper"> 
    <div id="google-map-holder" style="width:100%; height:100%;"></div> 
</div> 

</body> 
</html>

lo tanto, si usted está haciendo algo como lo anterior. El height:100%; no funcionará aquí.

Para que esto funcione, usted tiene que hacer lo mismo con todos los padres que el #google-map-holder es un hijo de, en este caso nos gustaría añadir a height:100%;#wrapper elemento.

SI, el elemento #google-map-holder estaba directamente fuera del elemento #wrapper y un niño de la body directamente a continuación, sólo haciendo html, body sería suficiente.

Fuente

2012-05-14 11:31:30 Zubair1

El problema es height: 100%; de #map_canvas.

Añadir esto a su <cabeza> y debería funcionar (probado en Firefox 5 y Safari 5.1):

<style> 
    html, body { 
    height: 100%; 
    } 
</style>

detalles porque esto es necesario echar un vistazo a la primera respuesta de esta pregunta:

Div 100% height works on Firefox but not in IE

Fuente

2011-08-03 17:55:25

Eché un vistazo a mi hoja de estilo básica y pensé que ya estaba allí, pero: No, no fue así. ¡Gracias por el aviso! +1 – kaiser

Google Maps no muestra

Respuesta

Cuestiones relacionadas