使用ajax动态加载谷歌地图v3

Question

当我尝试使用ajax加载谷歌地图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的情况下做到这一点？

谢谢.

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

Answer 2

这不受支持.请使用支持的方法加载API:

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

Answer 3

我这样做了......这个例子使用了jQuery和谷歌地图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
}

Answer 4

您必须在google maps API脚本中使用此参数"callback = initialize"来加载ajax:

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

这是谷歌地图文档:

Cómocargarel APIdeformaasíncrona

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（）; 当您需要时！