Question

我的网站上有google maps 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
});

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);
}

Google Maps Api v3标记。谷歌是未定义的

2 个答案: