Question

由于某些限制，我无法在页面加载时使用Google Map API的脚本标记。我尝试过多种方式将脚本添加到页面中，包括使用jQuery添加脚本标记，如下所示：

$('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);

这两个示例都会导致整个页面变为白色和空白。有关如何做到这一点的任何想法？

Answer 1

如果您查看您尝试从Google加载的网址返回的JavaScript，您会看到它包含document.write（）语句：

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

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

document.write（）是一个仅在页面加载期间可用的命令。之后无法调用，或者您将体验到您提到的结果。 Google不希望您在页面加载后加载此特定脚本。

我敢说吗？也许你需要注入一个指向带谷歌地图代码设置的页面的iframe，这样document.write（）可以按照他们的设计工作。

Answer 2

这对我有用（遵循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);  
}

Answer 3

我相信Fabio Pozzi的回答是正确的解决方案，除了他的答案之外还有一段代码，使用jQuery.getScript来加载google api加载器和地图。

            // 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'
                });
            }

Answer 4

即使这个问题有点陈旧，我也会回答。我认为你应该使用google api

google.load

遵循此文档 google api loader。要执行此操作，您需要一个谷歌API密钥，您需要包含脚本以在页面源中使用它们。之后，您可以使用回调来加载地图。

Answer 5

我确实知道这是一个老问题，但以下解决方案对我有用：然后将脚本添加到页面，您应该提供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 () {
 }

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

5 个答案: