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

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

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

---

这两个示例都会导致整个页面变为白色和空白。有什么想法吗？

如果您查看试图从Google加载的URL返回的JavaScript，您会看到它包含一个文档。write（）语句：

函数getScript（src）{ 文件。写（“”）； } document.write（）是一个仅在页面加载期间可用的命令。它不能事后调用，否则您将体验到您提到的那些结果。Google不希望您在页面加载后加载此特定脚本

---

我敢说吗？也许您需要插入一个iframe，指向带有google地图代码设置的页面，以便document.write（）可以按照他们的设计工作。

即使问题有点老，我也会回答。 我认为你应该使用谷歌api

google.load

遵循此文档 . 要做到这一点，您需要一个GoogleAPI密钥，并且需要在页面源代码中包含使用它们的脚本。

---

之后，您可以使用回调来加载地图。

这对我来说很有效（遵循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);  
}

---

我相信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'
                });
            }

---

我确实意识到这是一个老问题，但以下解决方案对我有效： 然后将脚本添加到页面中，您应该提供

回调

参数，然后延迟加载和倾斜适用于谷歌地图。下面是一个例子：

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

$（'body'）。追加（“”）；
window.initializeLogleMaps=函数（）{
}

我明白了。嗯。。。我还可以在加载之前将document.write更改为不同的函数，是吗？我做到了！我做到了：document.oldswrite=document.write；document.write=函数（whatToWrite）{$（“body”）.append（whatToWrite）；}；document.write=document.oldwite；我不认为你需要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'
                });
            }

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