Google-Maps-App by NETFORMIC

In Zeiten von Web 2.0 und Rich Internet Applications ist das Thema GoogleMaps kein Fremdwort mehr. Ganz im Gegenteil es ist fester Bestandteil im Werkzeug-Repertoire eines jeden Webentwicklers.

Man hört viel über grandiose Map-Applicationen, doch wo sieht man sie?  NETFORMIC hat es sich zur Aufgabe gemacht eine Standard Google-Maps zu entwickeln die durch diverse Konfigurationen zu verschieden Zwecken benutz werden kann. Die Application ist ein Verbund aus mehreren Programmier-/Sprachen/Techniken. Der Hauptteil ist in JavaScript mit dem JavaScript Framework jQuery geschrieben. Aber auch PHP und MySQL spielen eine Rolle.
Im folgenden Abschnitt werde ich die jeweiligen Möglichkeiten aufzeigen:

Grundsätzlich verfügt die Map über 2 Modi:

1. Lokal: Die Map wird mit einem lokalen, im JavaScript definierten, Marker-Array gefüllt.
2. Remote: Die Map bekommt eine Remote URL zugewiesen, von der sie sich die Marker im JSON Format abholen kann. (Hier gilt als Hinweis: über einen RemotProxy oder JSONP-Request können ebenfalls fremde Domains abgefragt werden.)

Basic Mode:
In der Grund-Konfiguration wird die Map die gegebenen Marker in Google-Marker transformieren und als Map-Overlay anzeigen.

Extended Mode:
Die Map verfügt über eine Vielzahl an kleinen Erweiterungen, die einem das “Customizing” extrem erleichtern.

1. Marker können Kategorien erhalten, welche es ermöglichen, pro Kategorie ein bestimmtes (eigenes) Icon anzugeben, welches dann als Marker-Icon fungiert.
   • Minimal benötigen die Marker einen namen, content, und eine uid(unique id).
   • Erweitertes Feld ist: category
   • Es können jedoch sämtliche, nicht reservierte Keys=>Value Pairs mitgeliefert werden, die eventuell später für eigene Zwecke benötigt werden. (Hinweis: Der komplette “Record” wird dem Marker als Store mitgegeben und ist somit überall und in jeder Funktion verfügbar.)
2. Marker können statischen „Content“ enthalten, welcher durch einen Klick als Marker-Popup angezeigt wird.
3. Der Marker-Parser hat ein Feature, welches es erlaubt URLs als „Content“ mit zu geben. Dies URLs müssen nur einen Präfix (url:) besitzen. Wird dieser Präfix erkannt, so wechselt die Map auf RemotContentDelivery, was bedeutet: der „Content“ wird ganz individuell, und vor allem nur bei einem Klick auf den Marker nachgeladen. Dieses Feature ist dann sehr sinnvoll, wenn sehr viele Marker auf der Karte eingesetzt werden.
4. Ein weiteres Feature ist die integrierte Side Bar, welche voll automatisch ein nach Kategorien gruppiertes Marker-Menü erzeugt, über welches die Marker auf der Karte angesteuert werden können (komplette Kategorien aus und einblenden etc…).
5. Die Map verfügt über Funktionalitäten, die es erlauben von „außerhalb“ mit ihr zu kommunizieren. Das bedeutet, man kann JavaScript Funktionen aus deren Kontext aufrufen um z.B. beim Klick auf der ‘Map oder suf einen Text link einen passenden Marker zu öffnen. Desweiteren gibt es Funktionen die es erlauben von außerhalb komplette Kategorien oder einzelne Marker aus und einzublenden.
6. Das wohl spannendste Feature ist:  die Map verfügt über eine Funktion, die es erlaubt, den kompletten MapSetup ausgeliefert zu bekommen(um ggf. die Karte wieder mit gleichen Einstellungen (aktiven Markern etc.)  laden zu können.
7. Durch eine minimale Erweiterung können sogar Fremdservices wie Wikipedia “getagte” Artikel auf der Karte anzeigen werden. Oder sogar Bilder vom Online-Bilder-Portal Panoramio.

Da die Applikation objektorientiert aufgebaut ist, sollte es keine Probleme hinsichtlich der Erweiterbarkeit geben.

Abbildung I – Google Maps Anbidnung am Beispiel von www.hotelsonair.tv:

Wie man an den Markern erkennen kann hat jede Kategorie ihr eigenes Icon. Das Menü hier links baut sich völlig automatisch anhand der Marker-Kategorien auf.. fügt man beispielsweise eine neue Kategorie hinzu, wird diese automatisch im Menü angezeigt.

Abbildung II

Der Screenshot zeigt eine Liste, die eigentlich nichts mit der Map direkt zu tun hat (also eine normale Listenansicht). Hier nutzen die Bilder in der rechten Liste die Funktionalität von „außerhalb“ um mit der Map zu kommunizieren, nämlich den Marker auf Klick zu öffnen. Das Popup wird dynamisch durch eine url die der Markerparser verarbeitet geöffnet und angezeigt. Das unter 6.) genannte Feauture auf der Liste steckt hinter dem Klick auf dem Button oberhalb der Liste… hier wird der komplette Map setup, so wie er aktuell ist, abgespeichert und beim versenden einer Favoriten-Mail wieder rekonstruiert.