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

由于某些限制，我无法在页面加载时使用Google Map API的脚本标记。我曾尝试添加脚本到页面许多不同的方式，使用jQuery添加脚本标签，像这样包括：页面加载后无法添加Google Map API脚本

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

这两个例子都会导致整个页面变白并且空白。有关我如何做到这一点的任何想法？

来源

2010-06-26 Jessie A. Morris

这是为我工作（以下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); 
}

来源

2012-04-30 10:06:28 Cesar

伟大的解决方案，谢谢！ – Purpletoucan 2012-06-13 21:50:37

如果你看一下由你试图从谷歌加载URL返回的JavaScript中，你会看到它包含一个document.write（）的声明：

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

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

文件.write（）是仅在页面加载期间可用的命令。之后不能调用它，否则你会遇到你提到的那些结果。谷歌不希望你在页面加载后加载这个特定的脚本。

敢说我吗？也许你需要注入一个iframe，指向一个页面，并设置google maps代码，这样document.write（）可以像设计它一样工作。

来源

2010-06-30 16:44:00 a7drew

我明白了。嗯......我也可以在加载之前将document.write改成另一个函数，是的？ – 2010-06-30 22:22:39

我做到了！我做了： document.oldWrite = document.write; document.write = function（whatToWrite）{（“body”）。append（whatToWrite）; }; document.write = document.oldWrite; – 2010-06-30 22:25:54

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

google.load

本文档 google api loader以下。要做到这一点，你需要一个谷歌API密钥，你需要包括脚本，以在你的页面源中使用它们。之后，您可以使用回调加载地图。

来源

2011-09-14 13:46:19

我不认为你需要API密钥来使用这个。 – 2014-08-16 11:53:24

我相信法比奥·波齐的答案是正确的解决方案，这一点，在这里除了他的回答是一个片段的代码使用jQuery.getScript来加载谷歌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' 
       }); 
      }

来源

2012-11-27 11:52:19 3urdoch

我也知道这是老问题，但下面的解决方案适用于我：然后添加脚本页面，你应该提供callback参数，然后延迟加载和倾斜度适用于谷歌地图。下面是示例：

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

来源

2014-06-17 10:41:49

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

回答

相关问题