Google Maps Api v3標記。 Google未定義

Question

我有一個帶有google maps api的網站，該網站是異步加載的。 但這引發了錯誤：找不到google。 我的代碼是：

<script>

function initialize() {

  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(51.817116, 4.780616),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    panControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    rotateControl: false
  };

  var map = new google.maps.Map(document.getElementById('maps'),
  mapOptions);
};

var customMarker = new google.maps.Marker({
  position: new google.maps.LatLng(51.817116, 4.780616),
  map: map
});

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3&sensor=false&' +
    'callback=initialize';
  document.body.appendChild(script);
}

addLoadEvent(loadScript);

</script>

當我刪除標記時，代碼可以正常工作。 如果我添加了某些示例中指定的標記，為什么它不起作用？

addLoad是一個加載事件。 那不是問題……有人可以幫我解決這個問題嗎？

Answer 1

您必須先加載Google Maps Javascript API v3，然后才能使用它。 您的標記創建正在加載API之前運行。 您需要將其移到Initialize函數中，直到API可用時才執行。

<script>

function initialize() {

  var mapOptions = {
    zoom: 10,
    center: new google.maps.LatLng(51.817116, 4.780616),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    panControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    rotateControl: false
  };

  var map = new google.maps.Map(document.getElementById('maps'),
  mapOptions);

  var customMarker = new google.maps.Marker({
    position: new google.maps.LatLng(51.817116, 4.780616),
    map: map
  });

};  // end of initialize


function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3&sensor=false&' +
    'callback=initialize';
  document.body.appendChild(script);
}

addLoadEvent(loadScript);

</script>

Answer 2

您要在initialize中本地定義地圖變量，這意味着其他任何函數都無法訪問它。 在initialize之外全局聲明它：

var map;

function initialize() {
  // code
  map = new google.maps.Map(document.getElementById('maps', mapOptions);
}