未捕獲的ReferenceError：未定義google

Question

我正在嘗試將geoJSON文件中的標記加載到我的地圖上，該地圖可以很好地加載，但是一直出現錯誤...

Uncaught ReferenceError: google is not defined

在這條線...

google.maps.event.addDomListener(window, 'load', initialize);

我還閱讀了其他一些問題，其中大多數涉及如何在地圖代碼之前包含google maps腳本。 我試過將它包括在我的頭部和地圖容器上方，但是沒有運氣。 地圖本身確實會加載，但我的JSON文件中的標記不會加載。

HTML / JS代碼

<!DOCTYPE html>
<html>
<head>
    <title>Game Industry Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel=StyleSheet href="css/style.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="navbar navbar-defualt navbar-fixed-top">
    <a class="navbar-brand" href="#">Game Industry Map</a>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="From Software, Naughty Dog, Bethesda Game Studios, BreakAway Games..." id="query" name="query" value="">
        <div class="input-group-btn">
            <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span></button>
        </div>
    </div>
</div>
<div class='content-container'>
    <div id="map"></div>
    <div id="company-info">
        <!--To do...-->
    </div>
</div>
<script type="text/javascript">
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 34.029602, lng: -118.452416},
            zoom: 13
        });
        map.data.loadGeoJson('data.json');
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
        type="text/javascript"></script>
</body>
<footer>Created by <a href="#">My Name</a>.</footer>
</html>

geoJSON文件

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [34.019602, -118.452416]},
      "properties": {
        "company-logo": "images/activision.png",
        "company-name": "Activision Publishing Inc",
      }
    },

    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [34.028230, -118.471270]},
      "properties": {
        "company-logo": "images/naughtydog.png",
        "company-name": "Naughty Dog Inc",
      }
    }
  ]
}

Answer 1

嘗試在調用庫的腳本之前包含google庫：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"
    type="text/javascript"></script>

<script type="text/javascript">
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 34.029602, lng: -118.452416},
            zoom: 13
        });
        map.data.loadGeoJson('data.json');
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

編輯

您在此處定義回調： /maps/api/js?key=API_KEY_HERE&callback=initMap

谷歌地圖加載initMap()所有組件后，它將調用您的initMap()方法。

但是您正在調用google.maps.event.addDomListener(window, 'load', initialize); 因此，當尚未加載google時，此功能之外。

您應該嘗試在您的initMap()調用中包含addDomListener調用！

Answer 2

你接近，首先你需要添加使用偵聽google.maps.event.addListerner()那么你需要的監聽器添加到使用DOM google.maps.events.addDomListner()

addListener是異步的，因此您需要使用回調編寫它。 這是一個例子：

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
  center: myCenter,
  zoom:5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
  position: myCenter,
  title:'Click to zoom'
  });

marker.setMap(map);

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

相關鏈接：

http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_marker_click

https://developers.google.com/maps/documentation/javascript/reference#event

https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

Answer 3

實際上，您可以這樣寫：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE"></script>

（沒有回調）。 也不需要API_KEY。 因此，在公共Maps JavaScript API應用程序中，強烈建議為生產系統中使用的任何鍵（尤其是面向公眾的鍵）添加引薦來源網址限制，並且僅授權應用程序的域，主機或完整文件URL。

未捕獲的ReferenceError：未定義google

問題描述

3 個解決方案

解決方案1
3 已采納 2016-03-28 17:14:00

解決方案2
0 2016-03-28 17:28:39

解決方案3
0 2018-01-24 05:20:59

未捕獲的ReferenceError：未定義google

問題描述

3 個解決方案

解決方案1 3 已采納 2016-03-28 17:14:00

解決方案2 0 2016-03-28 17:28:39

解決方案3 0 2018-01-24 05:20:59

解決方案1
3 已采納 2016-03-28 17:14:00

解決方案2
0 2016-03-28 17:28:39

解決方案3
0 2018-01-24 05:20:59