谷歌地图：未捕获的参考错误：谷歌未定义答案

【问题标题】：Google Maps: Uncaught ReferenceError: google is not defined谷歌地图：未捕获的参考错误：谷歌未定义
【发布时间】：2019-03-09 23:43:19
【问题描述】：

当我尝试使用我的地图加载 HTML 页面时收到此错误：

Uncaught ReferenceError: google is not defined

我以为这是我加载 Google 地图 API 的顺序，但我一开始就有。

我的 HTML 如下所示：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJT$
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"
    async defer></script>
    <script src="mapCode.js"></script>


    <title>Adventure Map</title>

</head>
<body>
<select id="type" onchange="filterMarkers(this.value);">
  <option value="">All Markers</option>
  <option value="backpacking">Backpacking</option>
  <option value="hiking">Hiking</option>
  <option value="offRoad">Off Road</option>
</select>

<div id="map-canvas" style="width: 100%; height: 600px"></div>

</body>

我的 html 代码调用的 mapCode.js 如下所示。难道我的东西顺序不对，是不是在加载地图之前没有及时加载google API？：

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});
var markerCluster;

// Our markers
markers1 = [
  ['0', 'Tanner Trail Grand Canyon', 36.0326, -111.8525, 'backpacking'],
  ['1', 'Yosemite Snow Shoe Badger Pass', 37.6648, -119.6634, 'backpacking'],
  ['2', 'Kayak Camping Catalina Island', 33.3504, -118.3282, 'backpacking'],
  ['3', 'Mini Trans Catalina Trail', 33.3403, -118.3262, 'backpacking']
];

/**
 * Function to init map
 */

function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }
  markerCluster = new MarkerClusterer(map, gmarkers1, {
    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m'
  });
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });

  gmarkers1.push(marker1);

  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.panTo(this.getPosition());
      //map.setZoom(15);
    }
  })(marker1, content));
}

/**
 * Function to filter markers by category
 */

filterMarkers = function(category) {
  var newmarkers = [];
  for (i = 0; i < markers1.length; i++) {
    marker = gmarkers1[i];
    // If is same category or category not picked
    if (marker.category == category || category.length === 0) {
      marker.setVisible(true);
      newmarkers.push(marker);
    }
    // Categories don't match 
    else {
      marker.setVisible(false);
    }
  }
  markerCluster.clearMarkers();
  markerCluster.addMarkers(newmarkers);
}
google.maps.event.addDomListener(window, "load", initialize);

【问题讨论】：

我认为一个错误是您需要将<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap" async defer></script> 更改为<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initialize" async defer></script> 您没有initMap 函数。
修复它以加载我的地图。如果您做出答案，我可以将其标记为正确。它现在确实导致了我的 js 中的另一个错误：google is not defined at mapCode.js 3

标签： javascript html google-maps

【解决方案1】：

我认为一个错误是你需要改变

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

进入

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initialize" async defer></script>

你没有 initMap 函数，但我假设你想调用 initialize()。

【讨论】：

【解决方案2】：

见https://medium.com/@nikjohn/speed-up-google-maps-and-everything-else-with-async-defer-7b9814efb2b。

问题是您的 js 没有被异步加载，因此它在 Google 地图脚本完成处理之前执行。

您需要包含一个回调函数，google 在加载完成时可以调用它。

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

【讨论】：

看看我的html代码我有：callback=initMap" async defer in there already no?
@searayman 您没有 initMap 函数，并且您正在尝试设置 google.maps.event.addDomListener(window, "load", initialize);，因为尚未加载谷歌地图但它会引发错误。
是的，但你没有initMap 函数。你有initialize。同样在mapCode.js 中，您正在尝试在回调之外var infowindow = new google.maps.InfoWindow。

【解决方案3】：

令人尴尬的是，我直接忘记在我的index.html 中加载 Google 地图脚本：

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

【讨论】：

【解决方案4】：

尝试使用 SHIFT+refresh 重新加载浏览器的缓存。

我遇到了这个问题，因为我在我的脚本之后加载了谷歌地图库，但是当我将它移到顶部时，问题仍然存在，然后我重新加载了浏览器的缓存并且它工作了，我知道这很愚蠢但发生了我。

【讨论】：