¿Cómo configurar un mapa a div dentro de otro div?
Soy un novato en javascript y necesito su ayuda para configurar un elemento google map to div que se encuentre dentro de otro elemento div. Aquí está el código que funciona si los elementos div no están anidados:
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, no funciona:
<body onload="initialize()">
<div id="main">
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>
¿Cómo resuelvo este problema?