Google Maps doesn't work when inside a div_问答_开发者

Google Maps doesn't work when inside a div

开发者 https://www.devze.com 2023-01-06 12:21 出处：网络

I\'m trying to use the Google Maps API and the div that is going to contain the map works only when not inside another div. I\'ve created a little sample code with two maps, the first works the second

I'm trying to use the Google Maps API and the div that is going to contain the map works only when not inside another div. I've created a little sample code with two maps, the first works the second doesn't. If I remove the doct开发者_开发百科ype of this piece of code, both work. Any ideas why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta content='application/xhtml+xml; charset=UTF-8' http-equiv='content-type' />
    <style type='text/css'>
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 50% }
        #map_canvas2 { height: 50% }
    </style>
    <title>Map</title>
    <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script>
    <script type='text/javascript'>
        function initialize() {
          var latlng = new google.maps.LatLng(20, 20);
          var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
        }
    </script>
  </head>
  <body onload='initialize()'>
    <div id='map_canvas'></div>
    <div>
      <div id='map_canvas2'></div>
    </div>
  </body>
</html>

This is how it looks like in Firefox and Chrome:

Google Maps doesn't work when inside a div

It does work, If you inspect the page in firebug, you'll see that the map is being created. But because you have no CSS positioning applied to the outer div, the map div created by Google maps is positioned under the first map_canvas

You need to position and set the dimensions for the outer div, try by giving the outer div a pixel height and pixel width...

EDIT

instead of :

<div id='map_canvas'></div>
<div>
  <div id='map_canvas2'></div>
</div>

try :

<!--<div id='map_canvas'></div>-->
<div style="width:900px;height:900px;">
  <div id='map_canvas2'></div>
</div>

You will see the map is working...

I think they are sitting on top of each other or something - change the height on the css to pixel heights and both maps will work

<body onload='initialize()'>
   <div>
      <div id='map_canvas'></div>
   </div>
</body>

Google Maps doesn't work when inside a div

精彩评论

关注公众号

热门标签

图文推荐

Google Maps doesn't work when inside a div

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：