Geek asks and answers

How to set map for div inside another div?

I am new to javascript and I need your help setting up a google map for a div element that is inside another div element. Here's the code that works if div elements are not 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 does not work:

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

How to solve this problem?

+5
source share
2 answers

After a little testing, I came to the conclusion that you need to set the height in the id="main"div as well

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

Since this is a container for a card and without a certain height, nothing will appear. It is like rolling a curtain; the card alone will not push it.

I assume that you already have something similar, since the map works without nesting, but I will repeat it again:

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

Google . % , div . google , div. ( - )

+1

More articles:


All Articles