頁面加載後無法添加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腳本

回答

相關問題