Map isn't showing on Google Maps JavaScript AP

I'm trying to put the div tag that shows the map (<div id="map-canvas"></div>) inside another div, but it doesn't show the map that way. Is it a CSS or a JavaScript problem? Or is it just the way the API works?

Here's my code with the the nested div:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div> <!-- ommiting this div will show the map -->
        <div id="map-canvas"></div>
    </div>
</body>
</html>

标签： javascript google-maps-api-3

7条回答

一纸荒年 Trace。

2楼-- · 2019-01-04 01:46

Wizard

Have you tried setting the height and width of the extra div, I know that on a project I am working on JS won't put anything in the div unless I have the height and width already set.

I used your code and hard coded the height and width and it shows up for me and without it doesn't show.

<body>
    <div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map -->
         <div id="map-canvas"></div>
    </div>
</body>

I would recommend either hard coding it in or assigning the div an ID and then add it to your CSS file.

0人赞添加讨论(0) 举报

相关推荐>>

3楼-- · 2019-01-04 01:47

I solved this problem with:

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>

0人赞添加讨论(0) 举报

Viruses.

4楼-- · 2019-01-04 01:54

Add style="width:100%; height:100%;" to the div see what that does

not to the #map_canvas but the main div

example

<body>
    <div style="height:100%; width:100%;">
         <div id="map-canvas"></div>
    </div>
</body>

There are some other answers on here the explain why this is necessary

0人赞添加讨论(0) 举报

贼婆χ

5楼-- · 2019-01-04 01:55

The problem is with percentage sizing. You are not defining the size of the parent div (the new one), so the browser can not report the size to the Google Maps API. Giving the wrapper div a specific size, or a percentage size if the size of its parent can be determined, will work.

See this explanation from Mike Williams' Google Maps API v2 tutorial:

If you try to use style="width:100%;height:100%" on your map div, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the <body>, but by default the <body> has an indeterminate height.

There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the <body> so that its height is 100% of the page. We can do this by applying style="height:100%" to both the <body> and the <html>. (We have to do it to both, otherwise the <body> tries to be 100% of the height of the document, and the default for that is an indeterminate height.)

Add the 100% size to html and body in your css

    html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

Add it inline to any divs that don't have an id:

<body>
  <div style="height:100%; width: 100%;"> 
    <div id="map-canvas"></div>
  </div>
</body>

0人赞添加讨论(0) 举报

走好不送

6楼-- · 2019-01-04 02:08

FIXED

Give initial height of div and specify height in percentage in your style;

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></div>

0人赞添加讨论(0) 举报

The star\"

7楼-- · 2019-01-04 02:11

I just want to add what worked for me, I added height and width to both divs and used bootstrap to make it responsive

   <div class="col-lg-1 mapContainer">
       <div id="map"></div>
   </div>

   #map{
        height: 100%;
        width:100%;
   }
   .mapContainer{
        height:200px;
        width:100%
   }

in order for col-lg-1 to work add bootstrap reference located Here

0人赞添加讨论(0) 举报

1 2 下一页

Map isn't showing on Google Maps JavaScript AP

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间