Google Map Hacks II

Von Positionen und Markern.

Im zweiten Teil der Google Maps Hacks geht es rund ums die Kartenkontrollen und Marker - Positionsmarken - auf der Karte. Die Google Map API bietet einen reichhaltigen Fundus an Kontrollelementen. die Positionsmarken bieten einen Spektrum von einfachen nackten Markern bis hin zu Infoboxen mit Medieninhalten wie Links, Bildern oder gar Videos. In diesem Teil des Tutorial will ich mich darauf beschränken einen Postionsmarker auf meine Heimatstadt Wien zu setzen.

Für die zweite Karte in meinem Blog benötige ich jetzt auch ein zweites Google Map Objekt. Die load() Funktion aus dem ersten Teil dieser Einführung muß daher erweitert werden. Dazu wird wieder der HTML Header editiert werden. Die zweite Karte nenne ich map2 und die zugehörige HTML Division bekommt die Id map2:

 function load() {
   if (GBrowserIsCompatible()) {
     var map = new GMap2(document.getElementById("map"));
     map.setCenter(new GLatLng(37.4419, -122.1419), 13);

     var map2 = new GMap2(document.getElementById("map2"));
     map2.setCenter(new GLatLng(48.2086,16.3719), 14);
   }
 }

Der Konstruktur GMap2() erzeugt das Karten Objekt map2 und benötigt als Parameter einen Verweis auf die HTML DOM Struktur in der der die Karte dargestellt wird. document ist die Basis jeder HTML Dokumentes in der mit der Funktion getElementById() nach dem mit der Id map2 gesucht wird. Die Methode setCenter() der GMap2 Objektes setzt den Kartenmittelpunkt und die Vergrößerungsstufe der Funktion. Als Argumente benötigt es ein Punktobjekt, das mit dem Konstruktor GLatLong() erzeugt wird, und die Vergrößerungsstufe als Integerwert, wobei 1 die größte Vergrößerungsstufe darstellt. Die Gleitkommazahlen 48.2086 und 16.3719 sind der Längen- und Breitengrad von Wien.

Jetzt soll der Benutzer der Karte natürlich nicht auf eine Vergrößerungsstufe festgelegt werden und außerdem bietet Google noch hübsche Satellitenbilder, die wir ihm auch zur Verfügung stellen wollen. Wir benötigen noch Steuerungselemente für unsere Karte, um auf diese Funktionen zugreifen zu können. Dazu bietet uns Google mit seiner API einfache Möglichkeiten mit der Methode addControl(). Wir erweitern jetzt die alt Bekannte load() Funktion, mit dieser Methode:

 function load() {
   if (GBrowserIsCompatible()) {
     var map = new GMap2(document.getElementById("map"));
     map.setCenter(new GLatLng(37.4419, -122.1419), 13);

     var map2 = new GMap2(document.getElementById("map2"));
     map2.addControl(new GSmallMapControl());
     map2.addControl(new GMapTypeControl());
     map2.setCenter(new GLatLng(48.2086,16.3719), 14);
   }
 }

Der Konstruktor GSmallMapControl() erweitert unsere Karte um ein kleines Steuerelement und der Konstruktor GMapTypeControl() bietet eine Auswahl der Kartentypen für den Benutzer.

Als letztes wollen wir noch einen Positionsmarkierung in die Karte setzen. In diesem Teil der Einführung beschränken wir uns auf einen einfachen Marker im Kartenmittelpunkt. Kartenfeatures werden mit der Methode addOverlay() über die Karte gelegt. Neben Positionsmarkierungen können unter anderem auch auch Linien, Infoboxen oder Bilder über die Karte gelegt werden. Eine Markierungsobjekt wird mit dem Konstruktor GMarker() erzeugt, dem als Argument wiederum einen Punkt mit auf dem Weg gegeben wird. erzeugt:

 function load() {
   if (GBrowserIsCompatible()) {
     var map = new GMap2(document.getElementById("map"));
     map.setCenter(new GLatLng(37.4419, -122.1419), 13);

     var map2 = new GMap2(document.getElementById("map2"));
     map2.addControl(new GSmallMapControl());
     map2.addControl(new GMapTypeControl());
     map2.setCenter(new GLatLng(48.2086,16.3719), 14);

     map2.addOverlay(new GMarker(map2.getCenter());
   }
 }

Die Methode getCenter() bestimmt den aktuellen Kartenmittelpunkt. Den kennen wir zwar im vorliegenden Fall, die Funktion wollte ich aber schon einmal zu Dokumentationszwecken einführen. Unsere Karte ist jetzt schon um ein paar Features reicher geworden. Um die Karte darzustellen, brauchen wir nur noch eine Division mit der Id map2 im HTML Body. Ich Unsere Karte ist jetzt schon um ein paar Features reicher geworden und im Anschluß folgt die Division <div id="map2" style="width: 300px; height: 300px;"></div>:

Im nächsten Teil des Tutorium wird es vor allem um mehr um die Möglichkeiten der Marker und ein paar weitere Karten Overlays gehen