使用Ajax动态加载Google Maps v3

Question

当我尝试使用ajax加载Google Maps v3时，结果是：

<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/2/8a/main.js" type="text/javascript"></script>

在源代码中，我想使用 JavaScript 的 document.write() 方法编写文本。

如何在不使用 iframe 的情况下实现这一点？

谢谢。

- ZiTAL

Answer 1

找到了一种实用的方法。

这里使用自定义事件（jQuery）的代码片段：http://jsfiddle.net/fZqqW/94/

window.gMapsCallback = function(){
    $(window).trigger('gMapsLoaded');
}

$(document).ready((function(){
    function initialize(){
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(47.3239, 5.0428),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
    }
    function loadGoogleMaps(){
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }
    $(window).bind('gMapsLoaded', initialize);
    loadGoogleMaps();
})());​

编辑 loadGoogleMaps 函数如果在全局范围内声明可能更加实用，特别是在ajax应用程序中工作时。并且布尔值检查将防止由于导航而多次加载api。

var gMapsLoaded = false;
window.gMapsCallback = function(){
    gMapsLoaded = true;
    $(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function(){
    if(gMapsLoaded) return window.gMapsCallback();
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function(){
    function initialize(){
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(47.3239, 5.0428),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
    }
    $(window).bind('gMapsLoaded', initialize);
    window.loadGoogleMaps();
});

- Armel Larcier

---

实际上对我来说开箱即用。 - Michael J. Calkins

我也发现了，谢谢分享。顺便说一下，我更新了我的答案，欢迎评论。 - Armel Larcier

在我的Durandal项目中也起作用了。 - GONeale

Answer 2

不支持此操作，请使用受支持的方法加载API：

http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API

- Chris Broadfoot

---

如果以后在单页应用程序中不需要它，那该怎么办？为什么用户必须等待脚本加载呢？ - SuperUberDuper

Answer 3

我是这样做的...这个例子使用了jQuery和google map v3.x

$.getScript("http://maps.google.com/maps/api/js?sensor=true&region=nz&async=2&callback=MapApiLoaded", function () {});

function MapApiLoaded() {
   //.... put your map setup code here: new google.maps.Map(...) etc
}

- Myster

---

它运行得很好，但是我在js控制台中收到了警告： “警告：您在此页面上多次包含Google Maps API。这可能会导致意外错误。” - phpJs

Answer 4

您必须在谷歌地图API脚本中使用此参数'callback=initialize'，以便通过ajax加载：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>

这是一份谷歌地图文档：

如何异步加载API

- borchvm

---

如何确保后面的代码能够运行，我想要先运行我的屏幕渲染脚本。 - SuperUberDuper

Answer 5

简单有效的解决方案（使用jQuery）：

var gMapsLoaded = false;

function loadGoogleMaps() { if(!gMapsLoaded) { $.getScript("https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=GoogleMapsLoaded", function(){}); } else { GoogleMapsLoaded(); } }

function GoogleMapsLoaded() {

   gMapsLoaded = true;

   // your code here - init map ...
}

将此代码粘贴到你的脚本中，需要时调用loadGoogleMaps();函数！

- Jan Šafránek

Answer 6

现在已经可以实现。请查看此处。该页面还提供了手动加载的变体，无需使用库。

npm install @googlemaps/js-api-loader


import { Loader } from "@googlemaps/js-api-loader"


const loader = new Loader({
apiKey: "YOUR_API_KEY",
version: "weekly",
...additionalOptions,
});

loader.load().then(() => {
 map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
 center: { lat: -34.397, lng: 150.644 },
 zoom: 8,
  });
});

- Christian

Answer 7

$LAB
  .setOptions({AlwaysPreserveOrder:true})
  .script("http://maps.google.com/maps/api/js?v=3.exp&sensor=false&async=2")
  .script("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/6/main.js")
  .script("script.js");

在 script.js 中初始化你的地图，不使用谷歌的加载方法，例如：

Namespace.map = (function(){

    var map,
        markers = [];

    return{
        init: function(){
                var myLatlng = new google.maps.LatLng(-25.363882,131.044922),

                    mapOptions = {
                      zoom: 4,
                      center: myLatlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

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

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Hello World!'
                });

                markers.push(marker);
            }
    };

}());

在 script.js 文件内：

Namespace.map.init();

// Don't use: google.maps.event.addDomListener(window, 'load', initialize);

注意：不要依赖此方法，因为谷歌会更改第二个js文件的名称。以下是他们文档中的示例：

https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

- Michael Benin

Answer 8

我稍微修改了一下神秘样本，看起来对我很有效

    window.mapapiloaded = function () {
        console.log('$.ajax done: use google.maps');
        createusinggmaps();
    };

    $.ajax({
        url: 'http://maps.google.com/-maps/api/js?v=3.2&sensor=true&region=it&async=2&callback=mapapiloaded',
        dataType: 'script',
        timeout: 30000, 
        success: function () {
            console.log('$.ajax progress: waiting for mapapiloaded callback');
        },
        error: function () {
            console.log('$.ajax fail: use osm instead of google.maps');
            createusingosm();
        }
    });

- D_Guidi