Es kommt ja doch hin und wieder vor, dass man in die eigene Seite oder das eigene Portal eine Karte von Google einbinden möchte. Mit einem einfachen JavaScript Schnipsel lässt sich hier die Karte integrieren und gegebenfalls auch ein wenig anpassen. Bei bis zu 25.000 Aufrufen vom Web aus läuft diese Anbindung übrigens kostenfrei, danach werden nutzungsabhängige Kosten oder Lizenzgebühren fällig. Das Google Tutorial zur Einbindung von Maps findet ihr hier: https://developers.google.com/maps/documentation/javascript/tutorial

Google Maps Style Editor

Wenn man also die Google Karte eingebunden hat, so kann es sein, dass das Look und Feel des eigenen Auftrittes so gar nicht mit dem Look&Feel der Karte zusammen passt. Oft sind die Gebäude in einem langweiligen grau dargestellt und die Straßen in einem seltsam anmutenden gelb. Tatsächlich ist es so, dass man diese Farben und damit das Look&Feel der Karte komplett nach eigenen Wünschen anpassen kann. Wie das Endergebnis aussehen kann, seht ihr in meinem eigenen Web Projekt, die Event und Location Map: https://kates-party.de/. Hier habe ich zum Beispiel die Wasserfarbe verdunkelt und die Straßenfarbe angepasst. Um die eigene Karte zu gestalten bietet Google einen Google Maps Style Wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

google maps editor

Der Wizard ist vergleichsweise einfach zu bedienen. Mit dem linken Einstellungs-Cockpit kann man die jeweiligen Elemente anpassen. Wenn man mit der Einstellung eines Elementes zufrieden ist, dann klickt man in dem rechten Einstellungsfenster auf „Add“, speichert somit die Einstellung und kann mit der Formatierung des nächsten Elements weiter machen.

Maps Elemente anpassen

Im rechten Steuerungselement gibt es einen Selector mit dem man sich aussuchen kann welches Element bearbeitet werden soll. Hier steht zum Beispiel zur Auswahl: Wasser, Straßen, Öffentliche Orte, Öffentliche Verkehrsverbindungen etc. Hier wählt man sich das Element aus welches man bearbeiten möchte, und kann dann über die unteren Elemente die Farbe, die Sättigung, die Helligkeit, den Kontrast, die Sichtbarkeit und die Fettung des Elements einstellen. Hier unterscheidet Google zwischen der Farbe und dem Farbton zur Einstellung. Größter Unterschied den ich hier entdeckt habe ist, dass bei Einstellung der Farbe auch die Labels mit Farbe gefüllt werden und so nicht mehr lesbar sind. Daher hier das „Hue“ Element benutzen um den Farbton zu verändern.

Angepasste Einstellungen ins JavaScript übernehmen

Wenn man mit der Bearbeitung fertig ist, so kann man diese Einstellungen recht einfach in das JavaScript einbinden. Das Vorgehen funktioniert folgendermaßen:

  1. Man speichert die Einstellung in ein Json Array
  2. Man bindet dieses Json Array an eine Variable im eigenen Code
  3. Man übergibt die Variable an die Maps im Google Maps Java Script

Hierfür klicken wir im Style Editor auf „Show Json“ im rechten Einstellungs-Element.

show json

Danach wird ein Json angezeigt welches man kopiert und in den eigenen Code, im gewöhnlichen JavaScript-Bereich, einfügt:

Wenn die Variable definiert ist sucht man sich die Stelle im Code wo die Google Karte als neues Objekt initialisiert wird und setzt über die Methode „setOptions“ die Variable ein:

Et Voilà! Wenn man nun die eigene Website startet/aufruft wird die Karte mit den eigenen Anpassungen angezeigt.

Oui, c’est fini. – Matthias Borchert