Google Maps no funciona cuando dentro de un div

Estoy tratando de usar el API de Google Maps y el div que va a contener el mapa funciona solo cuando no está dentro de otro div. Creé un pequeño código de muestra con dos mapas, el primero funciona y el segundo no. Si elimino el doctype de este fragmento de código, ambos funcionan. ¿Alguna idea de por qué?Google Maps no funciona cuando dentro de un div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta content='application/xhtml+xml; charset=UTF-8' http-equiv='content-type' /> 
    <style type='text/css'> 
     html { height: 100% } 
     body { height: 100%; margin: 0px; padding: 0px } 
     #map_canvas { height: 50% } 
     #map_canvas2 { height: 50% } 
    </style> 
    <title>Map</title> 
    <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script> 
    <script type='text/javascript'> 
     function initialize() { 
      var latlng = new google.maps.LatLng(20, 20); 
      var myOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions); 
     } 
    </script> 
    </head> 
    <body onload='initialize()'> 
    <div id='map_canvas'></div> 
    <div> 
     <div id='map_canvas2'></div> 
    </div> 
    </body> 
</html>

Ésta es la forma en que se ve como en Firefox y Chrome:

alt text

Fuente

2010-07-07 Pablo

funciona bien en Firefox – matpol

@matpol: allí, he subido como lo veo en Firefox y Chrome. – Pablo

Aparentemente, el tipo de documento de transición también funciona, así que voy con eso. – Pablo

Creo que están sentados en la parte superior de uno al otro o algo - cambiar la altura en el css a las alturas de píxeles y ambos mapas funcionarán

Fuente

2010-07-07 13:42:35 matpol

No, no están uno encima del otro. Mi error original es que el mapa no se muestra. Creé este ejemplo con dos mapas solo para mostrar cuándo se muestra y cuándo no. Si comenta el primer mapa, verá cero mapas. – Pablo

si comentas todo por hacer (es decir, la llamada javascript) con el mapa 1 y da una altura en píxeles para que el mapa 2 funcione. Si establece ambas alturas en píxeles, ambos mapas funcionan. – matpol

Funciona, si inspecciona la página en Firebug, verá que se está creando el mapa. Pero como no tiene un posicionamiento de CSS aplicado al div externo, el mapa div creado por Google maps se coloca debajo del primer map_canvas

. Necesita posicionar y establecer las dimensiones para el div externo, intente dándole al div externo una altura y ancho de píxel de píxeles ...

EDITAR

en lugar de:

<div id='map_canvas'></div> 
<div> 
    <div id='map_canvas2'></div> 
</div>

intento:

<!--<div id='map_canvas'></div>--> 
<div style="width:900px;height:900px;"> 
    <div id='map_canvas2'></div> 
</div>

Verá el mapa está trabajando ...

Fuente

2010-07-07 13:43:55 ekhaled

No creo que sea el caso. Comenta el primer mapa y verás cero mapas. Si fue correcto, debería ver un mapa. – Pablo

Pagar mi edición ... – ekhaled

esto funciona genial gracias .. –

<body onload='initialize()'> 
    <div> 
     <div id='map_canvas'></div> 
    </div> 
</body>

Fuente

2010-07-07 13:44:18 mcandre

¿Lo has probado? No muestra nada (ese es mi problema original, este es solo un ejemplo que muestra que el JavaScript está funcionando). – Pablo

Google Maps no funciona cuando dentro de un div

Respuesta

Cuestiones relacionadas