谷歌地图不会出现

Question

我正在关注谷歌地图的入门教程，但出于某种原因，地图没有出现在我的网页上。 相关的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

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

<!DOCTYPE html>

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

Answer 3

经过无数的挖掘和大量的帖子（不必要的过于复杂），我发现如果我只是添加高度和宽度样式INLINE ，地图加载。 我无法在标题或外部样式表中设置地图元素的高度和宽度 - 地图将消失。 我从当前（??）谷歌地图api文档中提取的其他所有内容：

很简单：

  <div id="mapWrapper" style="height:500px; width:500px;">
    <div id="map" style="height:100%"></div>
  </div>  <!-- end of the mapWrapper  --> 
    <script>
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }

    </script>

Answer 4

您的问题是您指的是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 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 个解决方案

解决方案1
15 已采纳 2011-10-06 20:52:30

解决方案2
0 2014-09-02 06:18:01

解决方案3
0 2017-01-07 16:48:12

解决方案4
0 2011-10-06 06:40:53

解决方案5
-1 2011-10-05 23:34:22

解决方案6
-2 2012-11-30 21:15:09

谷歌地图不会出现

问题描述

更新

6 个解决方案

解决方案1 15 已采纳 2011-10-06 20:52:30

解决方案2 0 2014-09-02 06:18:01

解决方案3 0 2017-01-07 16:48:12

解决方案4 0 2011-10-06 06:40:53

解决方案5 -1 2011-10-05 23:34:22

解决方案6 -2 2012-11-30 21:15:09

解决方案1
15 已采纳 2011-10-06 20:52:30

解决方案2
0 2014-09-02 06:18:01

解决方案3
0 2017-01-07 16:48:12

解决方案4
0 2011-10-06 06:40:53

解决方案5
-1 2011-10-05 23:34:22

解决方案6
-2 2012-11-30 21:15:09