代码之家 › 专栏 › 技术社区 › Jessie A. Morris

无法在页面加载后添加Google Map API脚本

google-maps jquery

Jessie A. Morris · 技术社区 · 14 年前

$('head').append('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>');

var script = document.createElement("script");
script.src = 'http://maps.google.com/maps/api/js?sensor=false';
script.type = "text/javascript";
document.head.appendChild(script);

这两个例子都会导致整个页面变成白色和空白。你有什么想法吗?

5 回复 | 直到 14 年前

j0k gauthamp 12 年前

这就是对我有效的方法(跟随JAM的评论)-只需在页面加载后运行函数

function writeGoogleMapsScript()
{
        document.oldWrite = document.write; 
        document.write = function(text)
        {                                 
            var parser = new DOMParser();
            var element = parser.parseFromString(text, "text/xml");           
            var child = element.firstChild;                
            var element = document.createElement("script");
            element.src = child.getAttribute('src');
            element.type= "text/javascript";            
            document.getElementsByTagName("head")[0].appendChild(element);                          
            document.write = document.oldWrite;
        };                         
        var element = document.createElement("script");
        element.src = "http://maps.google.com/maps/api/js?sensor=true&language=iw";
        element.type= "text/javascript";            
        document.getElementsByTagName("head")[0].appendChild(element);  
}

a7drew 14 年前

http://maps.google.com/maps/api/js?sensor=false

function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
}

document.write()是一个仅在页面加载期间可用的命令。它不能事后调用,否则您将体验到您提到的那些结果。谷歌不希望你在页面加载后加载这个特定的脚本。

我敢说吗?也许您需要使用google maps代码设置注入一个指向页面的iframe,这样document.write()就可以像他们设计的那样工作。

3urdoch 12 年前

我相信FabioPozzi的答案是正确的解决方案,除了他的答案之外,这里还有一段代码,使用jQuery.getScript加载GoogleAPI加载程序和地图。

            // load the google api loader
            if( typeof(google) == 'undefined' || !google.load ) {
                $.getScript( '//www.google.com/jsapi', function() {
                    loadMaps();
                });
            }

            // otherwise just load maps
            else {
                loadMaps();
            }

            // load the google maps api
            function loadMaps() {
                google.load("maps", "3", {
                    callback: initMap,
                    other_params: 'sensor=true'
                });
            }

Fabio Pozzi 13 年前

即使这个问题有点老了,我也会回答的。我认为你应该使用googleapi

google.load

遵循本文件 google api loader 之后,您可以使用回调来加载映射。

Darius Kucinskas 10 年前

我确实意识到这是一个老问题,但以下解决方案对我很有效: callback 参数,然后延迟加载和倾斜适用于Google地图。下面是一个例子:

 $('body').append('<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=XXX-YYYY-ZZZ&sensor=false&callback=initializeGoogleMaps"></script>');
 window.initializeGoogleMaps = function () {
 }