¿Cómo establecer un mapa para div dentro de otro div?

Soy un novato en javascript y necesito su ayuda para establecer un mapa de google para el elemento div que se encuentra dentro de otro elemento div. Aquí está el código que funciona si los elementos div no están anidados:¿Cómo establecer un mapa para div dentro de otro div?

function initialize() { 

var myOptions = { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions);

Sin embargo si he anidado divs, que no funciona:

<body onload="initialize()"> 
<div id="main"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</div> 
</body>

¿Cómo puedo solucionar este problema?

Fuente

2012-05-23 reederz

Después de un poco de pruebas, llegué a la conclusión de que es necesario establecer una altura de sus id="main" div también

style="width:100%; height:100%"

Debido a que es un contenedor para el mapa, y sin una altura nada definido aparecerá. Es como rodar por una cortina, el mapa no lo empujará hacia abajo por sí mismo.

Estoy suponiendo que tiene algo similar ya demasiado ya que el mapa de trabajo sin anidación, pero voy a hablar de nuevo:

<style type="text/css"> 
    html, body {height:100%} 
</style>

Fuente

2012-05-23 02:02:41

Gracias. Funcionó perfectamente Estaba buscando el problema en el lugar totalmente equivocado. – reederz

¡De nada! –

mapa de Google necesita una altura estática y la anchura de su lienzo. No debe usar% para alto y ancho si el div principal no tiene tamaño estático. También google map tiene un error que no se puede cargar en div oculto. (debe tener algún truco si lo hace)

Fuente

2012-05-23 02:34:41

¿Cómo establecer un mapa para div dentro de otro div?

Respuesta

Cuestiones relacionadas