Google Maps标记图标未加载(ReferenceError:未定义Google)

我正在使用一个简单的Google Maps Web应用程序，我得到

ReferenceError: google is not defined

页面加载时（参考scaledsize：new Google.maps.size（20，20）中的代码）它是几天前的工作，但是我只是为了好玩而没有将其放在版本控制中，所以我不知道是什么变化。它应该加载火车图标。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      var position = {lat: 45.5100, lng: -122.6000};
      var gmarkers = [];
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
      var lightRailicon = {
          url: iconBase+'rail.png',
          scaledSize: new google.maps.Size(20, 20)
      };
      function initMap() {
      var infowindow = new google.maps.InfoWindow();
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 45.5231, lng: -122.6765},
          zoom: 11
        });
        {% for vehicle in vehicles  %}
        var marker = new google.maps.Marker({
          position: {lat: {{ vehicle.latitude }}, lng: {{ vehicle.longitude }}},
          icon: lightRailicon,
          map: map
        });
        gmarkers.push(marker);
        infowindow =  new google.maps.InfoWindow({});
        marker.addListener('mouseover', function(){
           infowindow.setContent('<div style="width:400px; height:100px">'+"Position: "
            +'Latitude: ' +String({{ vehicle.latitude }})+' ' +'Longitude: '+String({{ vehicle.longitude}})+'<br/>'+
            "Destination: "+'{{ vehicle.signMessageLong }}'+
            '<br/>'+ "Vehicle ID: "+'{{ vehicle.vehicleID }}'+'<br/>'+
            "Is Congested: "+'{{ vehicle.inCongestion }}'+'<br/>'+
            "Delay: "+'{{ vehicle.delay }}'+'<br/>'+
            "Next Stop: "+'{{ vehicle.nextLocID }}'+'</div>');
           infowindow.open(map, this);
        });
        marker.addListener('mouseout', function(){
            infowindow.close();
        });
        {% endfor %}
      }

      function clearMarkers(){
           for(i=0; i<gmarkers.length; i++){
               gmarkers[i].setMap(null);
           }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=Key&callback=initMap"
    async defer></script>
  </body>
</html>

您是在异步加载API，所有取决于API 必须的代码都在回调函数中（API完成后执行或否则是执行的已知在API加载后执行）。

要解决问题，请将图标的定义移至回调函数。

function initMap() {
  var lightRailicon = {
    url: iconBase + 'rail.png',
    scaledSize: new google.maps.Size(20, 20)
  };

概念证明小提琴

代码段：

#map {
  height: 100%;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script>
  var map;
  var position = {
    lat: 45.5100,
    lng: -122.6000
  };
  var gmarkers = [];
  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  function initMap() {
    var lightRailicon = {
      url: iconBase + 'rail.png',
      scaledSize: new google.maps.Size(20, 20)
    };
    var infowindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById('map'), {
      center: {
        lat: 45.5231,
        lng: -122.6765
      },
      zoom: 11
    });
    //        {% for vehicle in vehicles  %}
    var vehicle = {
      latitude: 45.5100,
      longitude: -122.6
    }
    var marker = new google.maps.Marker({
      position: {
        lat: vehicle.latitude,
        lng: vehicle.longitude
      },
      icon: lightRailicon,
      map: map
    });
    gmarkers.push(marker);
    infowindow = new google.maps.InfoWindow({});
    marker.addListener('mouseover', function() {
      infowindow.setContent('<div style="width:400px; height:100px">' + "Position: " + 'Latitude: ' + '{{ vehicle.latitude }}' + ' ' + 'Longitude: ' + '{{ vehicle.longitude }}' + '<br/>' +
        "Destination: " + '{{ vehicle.signMessageLong }}' +
        '<br/>' + "Vehicle ID: " + '{{ vehicle.vehicleID }}' + '<br/>' +
        "Is Congested: " + '{{ vehicle.inCongestion }}' + '<br/>' +
        "Delay: " + '{{ vehicle.delay }}' + '<br/>' +
        "Next Stop: " + '{{ vehicle.nextLocID }}' + '</div>');
      infowindow.open(map, this);
    });
    marker.addListener('mouseout', function() {
      infowindow.close();
    });
    //        {% endfor %}
  }
  function clearMarkers() {
    for (i = 0; i < gmarkers.length; i++) {
      gmarkers[i].setMap(null);
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

相关内容

最新更新

热门标签：