Google Maps Api v3标记。谷歌是未定义的 [英] Google Maps Api v3 marker. google is undefined

问题描述

我有一个加载了异步的谷歌地图API的网站。但是，这引发了一个错误：没有找到谷歌。
我的代码是：

 < script> 
 
函数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 
}） ; 
 
函数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是一个加载事件。这不是问题...任何人都可以帮助我做到这一点吗？

解决方案

您无法使用Google Maps Javascript API v3直到它被加载。您的标记创建在加载API之前运行。您需要将其移入初始化函数，该函数在API可用前不会执行。

 < script> 
 
函数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 
}） ; 
 
}; //初始化结束
 
 
函数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> 
  

I've a website with the google maps api which is loaded asynchronous. But this throws a errer: google is not found. My code is:

<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>

When I delete the marker the code works correctly. Why is'nt it working if I add the marker as specified in some examples?

The addLoad is a load event. That's not the problem... Can anybody help me to get this working?

解决方案

You can't use the Google Maps Javascript API v3 until it is loaded. Your marker creation is running before the API is loaded. You need to move it in to the initialize function, which won't execute until the API is available.

<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>

这篇关于Google Maps Api v3标记。谷歌是未定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！