Question

我正在关注Google地图的introductory tutorial，但出于某种原因，地图未显示在我的网页上。相关的HTML / CSS / JS是：

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>

    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }

    </script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>

</html>

地图未显示在map_canvas div。

中

更新

我已经更改了页面，因此它不使用JQuery加载地图。它现在使用与教程中完全相同的JS，但仍然没有出现地图。

Answer 1

您的代码有3个问题：

（1）在<script type="text/javascript">function initialize() {

之前添加以下行

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

这是您的答案的帖子，但它不在您的文件http://www.iol.ie/~murtaghd/map/map.htm。

（2）您需要致电initalize()（再次：它在您的帖子中，但不在代码中）：

<body onload="initialize();">

（3）设置画布的大小以显示地图（再次：它在你的帖子中，但不在代码中）。之后，您可以根据需要更改大小。

<div id="map_canvas" style="width:500px; height:300px"></div>

您可以在jsfiddle上看到该网站正在运行。

Answer 2

您的问题是您指的是jQuery语法，但您没有在页面中包含jQuery库。我得到了JS错误：

Error: l.google.maps.Load is not a function
Source File: http://www.iol.ie/~murtaghd/map/map_files/main.js
Line: 42

Error: $ is not defined
Source File: http://www.iol.ie/~murtaghd/map/map.htm
Line: 24

第二个是杀手。

Answer 3

您不应该忘记在放置地图的标签上使用文档类型和加载initialize（）javascript函数，并且不要忘记设置高度：和宽度：到样式表，我会工作。如果你没有设置高度和宽度，它将不会显示

<!DOCTYPE html>

<body onload="initialize();">
      <div style="height:350px; width:100%;" id="map-canvas"></div>
</body>

Answer 4

经过无数的挖掘和大量的帖子（不必要的过于复杂），我发现如果我只是添加高度和宽度样式 INLINE ，地图就会加载。我无法在标题或外部样式表中设置地图元素的高度和宽度 - 地图将消失。我从当前（??）google maps api docs拉出的其他所有东西：

这很简单：

Person Table

1-John
2-Tom
3-Mary
4-Bob
5-Susy

Links Table
PersonA-PersonB
1-2
1-3
1-4
3-2
3-4


Display John and all links...

John
Tom
Mary
Bob

Answer 5

您必须使用initialize作为函数，因此请按如下方式更改代码：

$(function() {

要;

function initialize() {

<body>

要：

<body onload="initialize()" >

和： });

要： }

哪个应该导致：

<!DOCTYPE html>
<html>
<head>
    // This causes the common header, footer, styles, JQuery, etc. to be included
    <meta name="layout" content="main"/>

    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        // Use JQuery to trigger the loading of the Map
        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
        }

    </script>
</head>

<body onload="initialize()" >
    <div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>

Answer 6

我遇到了同样的问题。这段代码：

<div id="map_canvas" style="width:500px; height:300px"></div>

..帮助了我 - 我将样式宽度/高度添加到标记中并且它有效。

谷歌地图不会出现

更新

6 个答案: