jQuery und Google Maps: So geht's!

30. Juli 2007

Sphère armillaire (Bild: Wikimedia Commons)

Googles interaktive Landkarten kann man auch über eine Programmierschnittstelle (API) auf der eigenen Website einbinden, um beispielsweise Besuchern die umständliche Beschreibung der Anreise zu ersparen.

Wie man Google Maps über Javascript auf die eigene Homepage bringt, kann man in der Dokumentation zum Google Maps Javascript API nachlesen. NB: Für die Nutzung des Google Map API in der Version 3 ff. benötigt im Gegensatz zum Vorgänger keinen API-Key.

Im ersten Schritt werden die GMaps-Dienste auf der Seite eingebunden und initialisiert sowie ein HTML-Element bestimmt, in dem die interaktive Landkarte dargestellt wird.

Google schlägt hier das klassische Verfahren mit einem onload()-Eventhandler vor, der am <body>-Element hängt.
In der Praxis hat dieses Verfahren die bekannten Nachteile:

  • Der Seitenaufbau verzögert sich, bis der Eventhandler fertig abgearbeitet wurde.
  • Andere Scripts wollen ebenfalls beim Laden der Seite laufen, die Kaskadierung dieser Scripts erfordert Handarbeit.
  • Das Maps-API wird auf allen Seiten geladen, auch bei solchen, die gar keine Landkarte darstellen.

Besser geht’s mit der Javascript-Bibliothek jQuery.

Wir benötigen dazu ein HTML-Gerüst, in dem die Karte gezeichnet wird. Ich verwende ein <div>-Element in einer geeigneten Größe und mit einer eindeutigen id:

<html>
<head>
</head>
<body>
<div id="map" style="width: 640px; height: 200px"></div>
</body>
</html>

Anschließend wird das Maps-API und jQuery eingebunden, entweder von einer lokalen Kopie auf dem Webserver, oder – wie in meinem Fall – direkt von code.jquery.com. jQuery benutzt die Dienste von Amazon S3 zur Softwareverteilung und sollte daher ausreichend schnell und zuverlässig erreichbar sein.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" ></script>
</head>

Als Anwender von Textpattern packt man diese beiden Scripts am besten in einen eigenen Baustein (hier gmaps genannt), den man nur bei Bedarf bedingt einbindet und damit Ladezeiten spart. Es bietet sich zum Beispiel eine Abfrage der aktuellen Sektion als Kriterium an, etwa so:

<html>
<head>
<txp:if_section name="kontakt">
<txp:output_form form="gmaps" />
</txp:if_section>
</head>
<body>
<div id="map" style="width: 640px; height: 320px"></div>
</body>
</html>

Als letzten Schritt definiert ein Script den Kartenmittelpunkt und den Zoomfaktor des Ortes, der innerhalb des <div>-Elements darzustellen ist. Beim Einsatz von Textpattern passt dieses Script direkt in den Artikel oder den Artikel-Baustein, der zur Anzeige der Landkarte genutzt wird:

<body>
<!-- beliebiger Text -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Kartenparameter beim Laden der Seite festlegen
$(document).ready(function() {
    // Das Element für die Anzeige suchen
    var m = $("#map")[0];
    // Mittelpunkt der Karte
    var myLatlng = new google.maps.LatLng(47.967931, 13.594583);
    var myOptions = {
        // Vergrösserungsfaktor
        // 0: Welt
        // 1: Halbkugel
        // [...]
        // 16: Ein paar Straßenzüge
        // 20: Der Scheitel deines Nachbars
        zoom: 10,
        // Zentrum setzen
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(m, myOptions);
    // Markierung hineinpieksen
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "Knapp daneben"
    });
  }
);
</script>
<!-- weiterer beliebiger Text -->
<div id="map" style="width: 640px; height: 320px"></div>
<p>...lorem ipsum...</p>
</body>

Und nun, nach der langen Theorie, das praktische Resultat:

Kommentare

  1. Robert,
    I haven’t actaully tried to read the article, so you may have already said so, but do you think that linking to the latest pack from a different server would improve download speeds? Does that act as a CDN?

    Matthew

  2. Besides exempting a webmaster from maintenance chores tracking the now monthly jQuery update cycle, there’s two things to consider when loading jQuery directly from the Amazon S3 servers:

    • If your visitor happens to have a cached copy of jQuery it won’t be downloaded at all. The chance of finding a cached copy is significantly higher when you link to a common source than when you serve it from your own server (in case your own site isn’t a super-popular spot which is travelled by its visitors on a frequent base). This reduces page load times.
    • It causes an extra DNS lookup at the client for the first time the name needs to be resolved. This increases the page load time.

    AFAIK, Amazon’s S3 is no global CDN, but according to their FAQs “Amazon S3 was built to the same service level standards that Amazon requires for its own web sites, with [..] storage of each piece of data on multiple servers in multiple Amazon datacenters.” I don't know how these are distributed on the globe.

    So, I don’t think you could judge for one or the other option quite easily. I personally am a lazy old chap and link to the common script source to reduce maintenance. But, I haven't tried this for a very busy site. The lag you experience when you visit my post with the embedded google map largely stems from Google, not from jQuery.

    Sorry that I couldn't offer any concise suggestion - you’re left to your own experiments with YSlow or the Firebug’s “Net” panel.