如何知道Google地方何时加载并准备好(异步)?

时间:2013-06-16 16:55:53

标签: jquery google-maps-api-3 google-places-api

我在JQuery中异步加载谷歌地图和地点:

 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = "http://maps.google.com/maps/api/js?key=myKey&libraries=places&sensor=false&async=2&callback=MapApiLoaded";
 document.body.appendChild(script);

加载Google地图时会调用回调:

function MapApiLoaded() {

   var input = document.getElementById('searchField');
   var options = {
      types: ['(cities)'],
   };

   autocomplete = new google.maps.places.Autocomplete(input, options);

   google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
        var item = autocomplete.getPlace();
        // do some stuff
    }
    GMapsloaded = true;
 }

当我进入城市选择屏幕时,我首先检查是否已加载Google地图:

 if(!GMapsloaded) {
    alert('mapsnotloaded');
    return;
  }

当我的手机处于Wifi或3G状态时,我可以开始在占位符中输入并且谷歌地方会响应。当我在Edge时,我开始打字,谷歌地方没有任何互动。当我输入第一个字母时,我可能需要2分钟才能得到任何反应。

我真的只想在Places准备就绪时真正开始输入输入文本。但是我没有找到任何要绑定的事件。

有什么想法吗?谢谢

1 个答案:

答案 0 :(得分:6)

找到解决方案。我希望它会帮助某人(我花了4个小时):

// When Google places is ready, it adds an attr placeholder='Enter a location' or the equivalent in the current language
// It is the only way to know that it is monitoring the input field.
if (!GMapsloaded || $('#searchField').attr('placeholder') === undefined || $('#searchField').attr('placeholder') == false) {
    alert('Google places not attached to input');
    return;
}