Montag, 25. Juli 2011

Google Maps und jquery

Google hat ein recht mächtiges JavaScript API für Google Maps erschaffen. Dennoch ist es schwer damit dynamischen Content zu erstellen, weil man sich erst mal quer durch das ganze API lesen muss.

Mit gMap geht das in Kombination mit jQuery ganz leicht!

$("#map").gMap();
Und schon ist die Weltkarte erzeugt. 
image
Klar ist: So eine Karte braucht man recht selten und auch den Straßenkartentyp wird man nicht immer brauchen. Hier lässt sich gMap sehr leicht anpassen. So ist ein Aufruf mittels 

$("#map").gMap({ maptype: G_PHYSICAL_MAP });
schon genug um den Kartentyp zu ändern. Hierbei unterstützt das Plugin übrigens alle typischen Karten der Maps API: G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_DEFAULT_MAP_TYPES, G_PHYSICAL_MAP
Jetzt wissen wir wie man die Kartenart ändern. Aber wie komme ich an einen bestimmten Ort? Und wie zoome ich rein? Und überhaupt kann man diese netten kleinen Luftballons auch reinsetzen und gleich noch Tooltipps dazu ausgeben?
Klar:

image

Obige Karte wurde mit folgendem Code erzeugt:
$("#map").gMap({ markers:[{address: "Technische Universität Kaiserslautern Gottlieb-Daimler-Straße 47 67663 Kaiserslautern", html: "Technische Universität Kaiserslautern",   popup: true  }],
zoom: 7,
maptype: G_HYBRID_MAP });
Spart man sich “popup:true” so ploppt der Tooltip beim Luftballon erst auf, wenn man drauf klickt. Die Location lässt sich übrigens auch mit echten Koordinaten machen, aber da die TU Kaiserslautern für Google Bekannt ist, ist das alles kein Problem – wie es auch mit jeder anderen Adresse kein Problem wäre.Im übrigen kann man auch sehr leicht mehrere Marker verwenden.

Das ganze gibts übrigens hier zum herunterladen – sehr gut erklärt mit noch viel mehr Beispielen als beim mir gerade: http://gmap.nurtext.de/download.html

Keine Kommentare:

Kommentar veröffentlichen