Nie można dodać skryptu interfejsu API Map Google po pageload

Question

Z powodu pewnych ograniczeń nie mogę mieć znacznika skryptu dla interfejsu API Map Google dostępnego podczas ładowania strony. Próbowałem dodanie skryptu do strony wiele różnych sposobów, w tym przy użyciu jQuery dodać tag skryptu tak:

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

Próbowałem również umieścić go w sposób bardziej ręczny sposób, jak w przykładzie:

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

Oba te przykłady powodują, że cała strona staje się biała i pusta. Wszelkie przemyślenia na temat tego, w jaki sposób mogę to zrobić?

Answer 1

To co pracował dla mnie (po komentarzu Jam) - wystarczy uruchomić funkcję po stronie obciążenia

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 2

Jeśli spojrzeć na JavaScripcie zwracanej przez URL, który próbujesz załadować z Google, zobaczysz, że zawiera document.write() oświadczenie:

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

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

dokument .write() to polecenie, które jest dostępne tylko podczas ładowania strony. Nie można go później wywołać, lub doświadczasz tych wyników, o których wspomniałeś. Google nie chce, abyś załadował ten konkretny skrypt po wczytaniu strony.

Czy mogę to powiedzieć? Być może trzeba wstrzyknąć element iframe, który wskazuje stronę z ustawieniem kodu mapy google, tak aby document.write() działało tak, jak to zaprojektowało.

Answer 3

Odpowiem, nawet jeśli pytanie jest nieco stare. myślę, że należy użyć interfejsu API Google

google.load 

po tej dokumentacji google api loader. Aby to zrobić, potrzebujesz klucza Google api i musisz dołączyć skrypt, aby użyć ich w swoim źródle strony. Następnie można użyć wywołania zwrotnego, aby załadować mapę.

Answer 4

wierzę odpowiedź Fabio Pozzi jest poprawnym rozwiązaniem do tego, oprócz jego odpowiedź Oto urywek kodu przy użyciu jQuery.getScript, aby załadować zarówno program ładujący Google Api, jak i mapy.

  // 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 5

Zdaję sobie sprawę, że jest to stare pytanie, ale następujące rozwiązanie działa dla mnie: następnie dodanie skryptu do strony należy podać callback parametr, a następnie leniwy załadunku i ochoty pracuje dla Google Maps. Oto przykład:

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