How to set a map to div within another div?

google-maps-api-3, javascript

Solution

After a bit of testing, I concluded that you need to set a height to your `id="main"` div also

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

Because it's a container to the map, and without a defined height nothing will appear. It's like rolling down a curtain, the map won't push it down by itself.

I'm assuming you have something similar already too since the map works without nesting, but I'll mention it again:

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

Problem

I am a newbie in javascript and I need your help on setting a google map to div element which is within another div element. Here's the code which works if the div elements aren't nested: ``` 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); ``` However if I have nested divs, it doesn't work: ``` <body onload="initialize()"> <div id="main"> <div id="map_canvas" style="width:100%; height:100%"></div> </div> </body> ``` How do I solve this problem?

Original source