谷歌地圖不會出現

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