Javascript 谷歌地图标记图标未加载（参考错误：未定义谷歌）_Javascript_Google Maps

Javascript 谷歌地图标记图标未加载（参考错误：未定义谷歌）

javascript google-maps

Javascript 谷歌地图标记图标未加载（参考错误：未定义谷歌）,javascript,google-maps,Javascript,Google Maps,我正在开发一个简单的谷歌地图web应用程序，我得到了 ReferenceError: google is not defined 当页面加载时（参考代码中的scaledSize:new google.maps.Size（20,20））几天前它还在工作，但我只是为了好玩，没有把它放在版本控制中，所以我不知道发生了什么变化。它应该加载一个火车图标 <!DOCTYPE html> <html> <head> <title>Simple M

我正在开发一个简单的谷歌地图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>


简单地图
#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
var映射；
var位置={lat:45.5100，lng:-122.6000}；
var gmarkers=[]；
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
var lightRailicon={
url:iconBase+'rail.png'，
scaledSize:new google.maps.Size（20,20）
};
函数initMap（）{
var infowindow=new google.maps.infowindow（）；
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:45.5231，lng:-122.6765}，
缩放：11
});
{车辆中车辆的百分比%}
var marker=new google.maps.marker({
位置：{lat:{{vehicle.latitude}}，lng:{{vehicle.longitude}}，
图标：lightRailicon，
地图：地图
});
G标记器。推（标记器）；
infowindow=newgoogle.maps.infowindow（{}）；
marker.addListener（'mouseover'，function（）{
infowindow.setContent（“”+“位置：”
+'纬度：'+字符串（{vehicle.Latitude}}）+''+'经度：'+字符串（{vehicle.Latitude}}}）+'
+
“目的地：“+'{vehicle.signMessageLong}”+
“
”+“车辆ID:”+“{{Vehicle.vehicleID}}”+”
”+
拥挤：“+'{vehicle.incodestination}}'+'
”+
“延迟：”+'{{vehicle.Delay}}'+'
”+
“下一站：”+'{{vehicle.nextLocID}}'+''；
打开（地图，这个）；
});
marker.addListener（'mouseout'，function（）{
infowindow.close（）；
});
{%endfor%}
}
函数clearMarkers（）{
对于（i=0；i异步加载API，依赖于API的所有代码必须位于回调函数中（该函数在API加载完成后执行，或者在加载API后执行）
要解决此问题，请将图标的定义移到回调函数中
function initMap() {
  var lightRailicon = {
    url: iconBase + 'rail.png',
    scaledSize: new google.maps.Size(20, 20)
  };


代码片段：

#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

var映射；
变量位置={
拉脱维亚：45.5100，
液化天然气：-122.6000
};
var gmarkers=[]；
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
函数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'）{
中心：{
拉脱维亚：45.5231，
液化天然气：-122.6765
},
缩放：11
});
//{车辆中车辆的百分比%}
var车辆={
纬度：45.5100，
经度：-122.6
}
var marker=new google.maps.marker({
职位：{
纬度：车辆纬度，
液化天然气：汽车
},
图标：lightRailicon，
地图：地图
});
G标记器。推（标记器）；
infowindow=newgoogle.maps.infowindow（{}）；
marker.addListener（'mouseover'，function（）{
infowindow.setContent（“+”位置：“+”纬度：“+”{{vehicle.Latitude}}}”+“+”++”经度：“+{vehicle.Latitude}}}}+”
+
“目的地：“+'{vehicle.signMessageLong}”+
“
”+“车辆ID:”+“{{Vehicle.vehicleID}}”+”
”+
拥挤：“+'{vehicle.incodestination}}'+'
”+
“延迟：”+'{{vehicle.Delay}}'+'
”+
“下一站：”+'{{vehicle.nextLocID}}'+''；
打开（地图，这个）；
});
marker.addListener（'mouseout'，function（）{
infowindow.close（）；
});
//{%endfor%}
}
函数clearMarkers（）{
对于（i=0；i
请检查您的谷歌地图密钥