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?
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 Improve this question asked May 23, 2012 at 1:55 reederzreederz 9711 gold badge12 silver badges29 bronze badges2 Answers
Reset to default 5After 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>
Google map need a static height and width for its canvas. You should not use % for height and width if the parent div does not have static size. Also google map has a bug that it cannot load in hidden div. (you need to have some trick if doing so)