Google Maps für Webseiten Mitglieder

Ich habe mich erstmals mit der Maps befasst, und habe eine Übersichtskarte der Mitglieder von Arachnophilia.de erstellt. Ich beschreibe hier kurz wie man dies einfach selbst bewerkstelligen kann.

Google Maps

Maps

Die Google Maps API erlaubt es, einfach über Javascript Karten in seine eigene Webseite zu integrieren. Dazu braucht man erstmal einen Schlüssel, den man kostenlos auf der Maps API Seite beantragen kann (ein Google Konto vorrausgesetzt).

Koordinaten abfragen

Die Karten funktionieren nach dem Koordinatensystem (geographische Länge und Breite). Möchte man also die Karte ausrichten, oder einen Marker auf der Karte platzieren, so muss man die genauen Koordinaten kennen. Da man die aber meistens nicht kennt, und nur eine Adresse hat, bietet Google den Geocoding Service an. Über diesen Service kann man entweder via HTTP Abfrage oder via Javascript die Koordinaten eines Ortes oder einer Adresse abfragen, wie zum Beispiel „7373 Lorentzweiler, Luxemburg“. Die Koordinaten erhält man bei einem HTTP Request entweder im xml, kml, csv, oder json Format.

Da man „nur“ 50.000 Geocode Abfragen pro Schlüssel am Tag machen kann, und diese Abfragen sehr zeitintensiv sind, mussten die Koordinaten natürlich in das Profil der Mitglieder eingebunden werden, um nicht bei jedem Seitenaufruf neu ermittelt werden zu müssen. Demnach wird nur beim Erstellen oder Bearbeiten eines Profils eine Geocode Abfrage gemacht.

Google Map erstellen

Jetzt, wo sichergestellt ist, dass man die Koordinaten vorliegen hat, kann man auch schon die Karte in die Webseite einbinden. Die Dokumentation von Google Maps ist dabei sehr aufschlussreich.
Zuerst erstellt man einen Marker (für jedes Mitglied) anhand der Koordinaten und verpasst ihm eventuell noch ein eigenes Icon, so wie ich es auf Arachnophilia.de gemacht habe. Anschliessend fügt man dem Marker einen Event Listener hinzu, damit bei einem Klick auf diesen auch die Info-Sprechblase erscheint. Diese kann man (fast) beliebig mit HTML Code füllen.

Das war’s dann auch schon. Gerne darf der Javascript Code der Google Karte auf Arachnophilia übernommen werden (einfach im Quellcode der Seite suchen).

Die bietet aber noch jede Menge weitere Klassen, Typen und Funktionen, so dass man sicherlich noch weit mehr als eine einfache Mitglieder Übersichtskarte mit Google Maps erstellen kann. Hier ist nur Kreativität gefragt :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.