Javascript Google Maps API提供参考错误Google未定义

我正在使用谷歌地图将maker保存到我的数据库中。firebug显示ReferenceError：google未定义错误。然而，地图显示了，但提交按钮似乎不起作用。 这是我的密码

<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $googlemapkey;?>&callback=initialize" type="text/javascript"></script>

<script>
  // Ajax / upload part
$(document).ready(function() {
  // initialize Google Maps
  initialize();
  // save marker to database
  $('#submitButton').click(function() {
    // we read the position of the marker and send it via AJAX
    var position = marker.getPosition();
    $.ajax({
      url: 'update_map.php',
      type: 'post',
      data: {
        lat: position.lat(),
        lng: position.lng(),
        id : <?php echo $id;?>
      },
      success: function(response) {
        // we print the INSERT query to #display
        $('#output').html(response);
      }
    });
  });

});

//Google Maps part
var map = null;
var marker = null;

// Google Maps
function initialize() {
  var startDragPosition = null;
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long;?>),  // Over Belgium
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-big'), mapOptions);
  // set the new marker
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(<?php echo $lat;?>, <?php echo $long;?>),
    map: map,
    draggable: true
  });

  var myGeocoder = new google.maps.Geocoder();

  // set a callback for the start and end of dragging
  google.maps.event.addListener(marker,'dragstart',function(event) {
    // we remember the position from which the marker started.  
    // If the marker is dropped in an other country, we will set the marker back to this position
    startDragPosition = marker.getPosition();
  });
  google.maps.event.addListener(marker,'dragend',function(event) {
    // now we have to see if the country is the right country.  
    myGeocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK && results[1]) {
        var countryMarker = addresComponent('country', results[1], true);

      }
      else {
        // geocoder didn't find anything.  So let's presume the position is invalid
        marker.setPosition(startDragPosition);
      }
    });
  });
}

function addresComponent(type, geocodeResponse, shortName) {
  for(var i=0; i < geocodeResponse.address_components.length; i++) {
    for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
      if (geocodeResponse.address_components[i].types[j] == type) {
        if (shortName) {
          return geocodeResponse.address_components[i].short_name;
        }
        else {
          return geocodeResponse.address_components[i].long_name;
        }
      }
    }
  }
  return '';
}
</script>

，），
地图：地图，
德拉格布尔：是的
});
var myGeocoder=新的google.maps.Geocoder（）；
//为拖动的开始和结束设置回调
google.maps.event.addListener（标记，'dragstart'，函数（事件）{
//我们记得标记开始的位置。
//如果在其他国家/地区掉下标记，我们会将标记放回该位置
startDragPosition=marker.getPosition（）；
});
google.maps.event.addListener（标记，'dragend'，函数（事件）{
//现在我们必须看看这个国家是否是正确的国家。
myGeocoder.geocode（{'latLng'：marker.getPosition（）}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK&&results[1]）{
var countryMarker=addresComponent（'country'，结果[1]，true）；
}
否则{
//地理编码器没有发现任何东西，所以我们假设这个位置无效
标记器设置位置（起始位置）；
}
});
});
}
函数addresComponent（类型、地理代码响应、短名称）{
对于（var i=0；i

这段代码在我开始使用API密钥之前使用。另外，我把谷歌api代码放在jquery之前仍然是相同的错误

有人能告诉我怎么解决这个问题吗？感谢您的时间。

不要在$（文档）上使用initialize（）函数。准备好了。 移除它。 当google API发送回调时，将自动调用initialize（）函数

---

现在，文档已加载，但没有时间从Google API获取信息，并在从Google获取信息之前启动初始化函数。

在maps API有机会加载之前，您的代码正在运行。还想知道为什么在将

initialize

函数作为回调参数传递时手动调用它？@JaredSmith如果我从API中删除initialize，它返回一个错误initialize not defined。请将加载maps API的脚本移动到定义了

initialize

的脚本之后。您还犯了一个典型的过早优化错误：使用同步脚本加载直到一切正常，然后担心

async defer

以加快速度。