未捕获的ReferenceError：未定义google

Question

I'm trying to to load in markers from a geoJSON file onto my map, the map loads fine, but keep getting an error... 我正在尝试将geoJSON文件中的标记加载到我的地图上，该地图可以很好地加载，但是一直出现错误...

Uncaught ReferenceError: google is not defined

at this line... 在这条线...

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

I've read a few other questions on this, and most of it deal with how you need to include the google maps script before your map code. 我还阅读了其他一些问题，其中大多数涉及如何在地图代码之前包含google maps脚本。 I've tried including it in my head and right above my map container, but no luck. 我试过将它包括在我的头部和地图容器上方，但是没有运气。 The map itself actually does load, just the markers from my JSON file don't. 地图本身确实会加载，但我的JSON文件中的标记不会加载。

HTML/JS Code 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 File 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

Try to include the google library before the script calling the library: 尝试在调用库的脚本之前包含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>

Edit 编辑

You are defining a callback here : /maps/api/js?key=API_KEY_HERE&callback=initMap 您在此处定义回调： /maps/api/js?key=API_KEY_HERE&callback=initMap

This will call your initMap() method once google maps has loaded all its components. 谷歌地图加载initMap()所有组件后，它将调用您的initMap()方法。

But you are calling the google.maps.event.addDomListener(window, 'load', initialize); 但是您正在调用google.maps.event.addDomListener(window, 'load', initialize); outside this function, hence, when google isnot yet loaded. 因此，当尚未加载google时，此功能之外。

You should try to include your addDomListener call in your initMap() call ! 您应该尝试在您的initMap()调用中包含addDomListener调用！

Answer 2

You are close, first off you need to add a listener using google.maps.event.addListerner() , then you need to add the listener to the DOM using google.maps.events.addDomListner() 你接近，首先你需要添加使用侦听google.maps.event.addListerner()那么你需要的监听器添加到使用DOM google.maps.events.addDomListner()

addListener is async, so you need to write it with a callback. addListener是异步的，因此您需要使用回调编写它。 Here is an example: 这是一个例子：

<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>

Relevant Links: 相关链接：

http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtml_map_marker_click 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#event

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

Answer 3

In fact, you can just write: 实际上，您可以这样写：

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

(without the callback). （没有回调）。 The API_KEY is also not necessary. 也不需要API_KEY。 In a public Maps JavaScript API app it is therefore strongly recommended to add a referrer restriction to any key used in a production system, especially public facing ones, and only authorize the domain, host or even full file URL of your app. 因此，在公共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