Jak ustawić mapę na div w innym div?

Jestem nowicjuszem w javascript i potrzebuję twojej pomocy w ustawieniu mapy google na element div, który jest w innym elemencie div. Oto kod, który działa, jeśli elementy div nie są zagnieżdżone:

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);

Jednak jeśli mam zagnieżdżone divy, to nie działa:

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

Jak rozwiązać ten problem?

questionAnswers(2)

yourAnswerToTheQuestion