Question

我按照https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

的说明操作

当我在Netbeans 8.0.2上运行它时，只显示灰色div，没有显示地图。

这是我的代码：

    <html>
    <head>
    <title>Practicing Google Maps</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <script src="https://maps.googleapis.com/maps/api/js">
        function initialize() {

            // The Map object constructor takes two arguments:

            /* 
             * A reference to the div that the map will be loaded into. We use
             * the JavaScript getElementById function to obtain this:
             */
            var mapCanvas = document.getElementById('map-canvas');

            /* 
             * Options for the map, such as the center, zoom level, and the map type.
             * There are many more options that can be set, but these three are required:
             */
            var mapOptions = {
                center: new.google.maps.LatLng(44.5403. -78.5463),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            }

            var map = new google.maps.Map(mapCanvas);
        }

        /*
         * Add an event listener to the window object that will call the initialize function
         * once the page has loaded. Calling initialize before the page has finished loading
         * will cause problems, since the div it's looking for may not have been created
         * yet; this function waits until the HTML elements on the page have been created
         * before calling initialize.
         */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas">

    </div>
</body>
</html>

我错过了什么？我甚至评论谷歌的指示，所以我不会错过任何一件事，但谷歌地图仍然没有出现。

谢谢。

Answer 1

尝试在地图画布div中添加尺寸。这通常有效。

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

Answer 2

加载Google地图库后，您似乎错过了结束</script>。然后是代码的开放<script>标记。你也有一些拼写错误，纠正如下：

center: new google.maps.LatLng(44.5403, -78.5463),

初始化地图时你也遗漏了mapOptions：

var map = new google.maps.Map(mapCanvas, mapOptions);

最后，你的div应该有一些维度。

以下工作代码：

function initialize() {

  var mapCanvas = document.getElementById('map-canvas');

  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }

  var map = new google.maps.Map(mapCanvas, mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="height:200px; width:200px" id="map-canvas">

按照Google地图网站的说明操作后，Google地图无法使用

2 个答案: