Peter Nack: Maps/JQuery- Script erst nach Fertigstellung der Seite einbinden

Tag allerseits,

es geht um die Einbindung von JavaScript-Resourcen in Verbindung mit Google-Maps.

Wie kann ich erreichen, dass die gesamte Seite gerendert wird und meine JavaScript-Funktionen ausgefuehrt werden _bevor_ ich die Google-Maps-API einbinde?
Hintergrund ist der, dass ich die UI mit JavaScript ein wenig umgestalte. Derzeit ist es so, dass die Umgestaltung erst genau dann geschieht, wenn auch Google-Maps geladen ist.

Zur Struktur:

  • Im Head binde ich mein Javascript-File ein
    <script src="/gui/js/my.js" type="text/javascript"></script>

  • Zuvor lade ich JQuery mittels

<script type="text/javascript" src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">

google.load("jquery", "1"); //.3.2");
</script>

  • Mein JavaScript-File besitzt am Anfang $(function()

  • Vor dem Schlieszen des Bodys binde ich dann Maps ein
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=BlaBlub">

Mein Wunsch ist es, dass der letzte Schritt erst _nach_ dem Ausfuehren der anderen Scripte ausgefuehrt wird.

Beim Rumstoebern bin ich auf folgende Funktion gestoszen:

function LoadJavaScript(file_url)  
{  
  var heads=document.getElementsByTagName("head");  
  script_element=document.createElement("script");  
  script_element.type="text/javascript";  
  script_element.src=file_url;  
  heads[0].appendChild(script_element);  
}  

Nutze ich die Funktion um zb ein weiteres Script nachzuladen, so klappt das in der Tat wunderbar (selbst mit setTimeout).
LoadJavaScript("/gui/js/my.js");

Doch wenn ich als Source die Maps-URL angebe (also die maps.google.com[..]), so laed sich meine Seite neu und im Dokument steht lediglich die Script-Angabe
<script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/193c/maps2.api/main.js" type="text/javascript"></script>

Daraus schlussfolgere ich, dass es sehr wahrscheinlich mit der Maps-API zu tun hat. Aber irgendwie komme ich da nicht wirklich weiter.

Kann mir einer hier evtl. Tips geben wie ich das Problem - vielleicht auch auf eine andere Art und Weise - loesen kann?

Besten Dank
Peter

  1. ..meinte natuerlich JavaScript, nicht JSP.

  2. Hallo,

    ich konnte jetzt bereits herauskristalisieren, dass es prinzipiell mit dem on-demand Laden der API zu tun hat. Auf diese Art wird das von Haus nicht unterstuetzt. Es gibt jedoch Abhilfen (zb mittels IFrame), welche ich gerade einzeln durchgehe..

    Danke & MfG
    Peter

  3. Hallo,

    ich konnte das Problem nun loesen.

    Folgender Ansatz ist recht zufriedenstellend:
    how-to-dynamically-load-the-google-maps-javascript-api-on-demand-loading

    Doch unter Verwendung von jQuery bin ich hiermit auf ein paar Probleme gestoszen. Daher habe mich nun fuer jQuery's getScript-Methode + Callback entschieden. Das Ergebnis ist, dass die Seite erst vollstaendig geladen wird, meine Skripte korrekt ausgefuehrt werden und erst anschliezsend die Map-Api (und die damit verknuepften lokalen Funktionen) geladen bzw. ausgefuehrt werden.

    Die Ladezeit (natuerlich aus Sicht des Benutzers) ist erheblich minimiert worden.

    MfG
    Peter