Google Maps API

1. Startbeispiel

Google erzeugt nicht nur den Key für den angegebenen URL, sondern liefert auch gleich den zu kopierenden Quelltext (ggf. in leicht abgewandelter Form), der nach erfolgreicher Implementierung und Anpassung den Google-Firmensitz anzeigt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=
          hier-der-key-drin" type="text/javascript"></script>
 </head>
 <body>
  <div id="map" style="width: 500px; height: 400px"></div>
  <script type="text/javascript">
   //<![CDATA[
   var map = new GMap2(document.getElementById("map"));
   map.addControl(new GSmallMapControl());
   map.setCenter(new GLatLng(37.4419, -122.1419), 13);
   //]]>
  </script>
 </body>
</html>

Obiger Quelltext, genauer die beiden <SCRIPT>-Elemente und das <DIV>-Element sind in diese Seite eingearbeitet. Die Karte ist mit den (minimalen) Kontrollwerkzeugen bzw. der Maus manipulierbar. Somit ist mit wenigen Handgriffen ein erster Erfolg sichtbar.

Was passiert? Es wird im ersten <SCRIPT> eine Verbindung zu den JavaScript-Dateien des Google-Servers hergestellt (und der Schlüssel übertragen sowie die Version mitgeteilt, im konkreten Fall "v=2"). Die JavaScript-Klassen mit ihren Methoden und Ereignissen stehen danach zur Verwendung in der Seite bereit. Gesteuert wird ein Seitenelement mit einer entsprechenden ID (Zeile 7). Sollen mehrer Karten in einer Seite dargestellt werden (normale Karte und im Infofenster Detailkarte) so müssen unterschiedliche IDs verwendet und angesprochen werden.

Alles was die Landkarte selber betrifft ist in der Klasse "GMap2" enthalten. Mit "new" wird der Konstruktor aufgerufen und eine neue Instanz gebildet. Aus der Vielzahl der Methoden sind die Statusmethoden "addControl" und "setCenter" verwendet worden.

Ein Fallstrick ist z.B. gegeben, wenn das Map-<DIV>-Element und das zugehörige JavaScript in ein weiteres <DIV>-Element verschachtelt wird. Der Internet Explorer erzeugt bei solchen Konstellationen undefinierte Abbrüche im Seitenaufbau. Deshalb ist (unabhängig von der Position des Map-<DIV>-Elements) der JavaScript-Block an einer "sicheren" Stelle zu positionieren, z.B. über dem schließenden <BODY>-Element. Prinzipiell sollten externer JavaScript-Code so früh wie möglich eingebunden werden und JavaScript-Code in der Seite selber so spät wie möglich, wodurch weitestgehend gesichert werden kann, daß der DOM-Baum gefüllt ist und somit angesprochen werden kann.

Validierung mit Topstyle

Um eine fehlerlose XML-Validierung (z.B. in Topstyle) zu sichern wurden das kaufmänische Und-Zeichen ("&") im Google-URL in Zeile 4 entsprechend umschrieben mit "&". Diese Thematik tritt im Weiteren noch mehrmals auf.

Prinzipiell sollte wie immer nach dem Serverupload mit der JavaScript-Konsole o.ä. und einem Validierungstool (W3C, WDG oder Tidy [auch für FF]) geprüft werden. JavaScript-Fehlermeldungen bzw. -warnungen sind mit Vorsicht zu genießen, da manche Browser garnicht verwendete Elemente als fehlerhaft einstufen.

Die verwendeten Grafiken lassen sich z.B. in FF mit dem Webdeveloper Toolbar (Grafiken > Grafikinformationen anzeigen) auflisten und speichern.

< >