jquery - 动态加载Google Maps API

Question

我想动态加载谷歌地图 API - 当我当前页面上存在特定元素时。

当我尝试使用地理编码器时，我收到以下消息:

ReferenceError: google is not defined

所以我认为 map api 无法成功加载，但在 firebug 中一切看起来都很好(脚本被调用是正确的)

if ($('.vcard').length > 0) {

    // load google maps when vcard is present

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://maps.google.com/maps/api/js?sensor=false";
    $("head").append(s);

    // error here - unable to use google maps
    var geocoder = new google.maps.Geocoder();

有什么想法吗？谢谢。

Answer 1

我已经修改了您的代码，以便在脚本加载后运行:

if ($('.vcard').length > 0) {

    // load google maps when vcard is present

    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "https://maps.google.com/maps/api/js?sensor=false";
    s.onload = function() {
        var geocoder = new google.maps.Geocoder();
    };
    $("head").append(s);