admin管理员组

文章数量:1356064

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 doctype of this piece of code, both work. Any ideas why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".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='' 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:

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 doctype of this piece of code, both work. Any ideas why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/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./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:

  • javascript
  • api
  • google-maps
Share Improve this question edited Jul 7, 2010 at 13:44 Pablo Fernandez asked Jul 7, 2010 at 13:34 Pablo FernandezPablo Fernandez 288k139 gold badges403 silver badges644 bronze badges 2
  • @matpol: there, I uploaded how I see it in Firefox and Chrome. – Pablo Fernandez Commented Jul 7, 2010 at 13:53
  • Apparently, the transitional doctype also works, so I'm going with that. – Pablo Fernandez Commented Jul 7, 2010 at 14:39
Add a ment  | 

3 Answers 3

Reset to default 5

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>

本文标签： javascriptGoogle Maps doesn39t work when inside a divStack Overflow

版权声明：本文标题：javascript - Google Maps doesn&#39;t work when inside a div - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743953051a2567639.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。