Home/ Questions/Q 7967825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T06:58:57+00:00

I am a newbie in javascript and I need your help on setting a

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0