Straßen, Häuser und Flüsse im CI: So lassen sich Google-Karten an ein Webdesign anpassen

21. Mai 2015 von Sebastian Maier

Damit Kunden kaufen, müssen sie zuerst einmal den Weg in die Büroräume oder das Ladengeschäft finden. Wie für so vieles gibt es auch dafür ein fleißiges Helferlein von Google: Der Kartendienst Google Maps, der Standorte und Strecken auf einem Luft- oder Satellitenbild anzeigt. Sogar ein Routenplaner ist integriert, der verschiedene Verkehrsmittel und aktuelle Stauinformationen in Betracht zieht.

Bei dieser Fülle an Funktionen ist es kein Wunder, dass Google Maps von den meisten Websites gar nicht mehr wegzudenken ist. Um den eigenen Standort mit dem Google-Tool darzustellen, wird ganz einfach ein von Google generierter Code in die Website eingebunden.

Doch oftmals passt die Google-Standardkarte nicht zum Aussehen der Website beziehungsweise zum CI des Unternehmens. Damit kann diese schnell zum optischen Störfaktor in einem sonst aufeinander abgestimmten Webdesign werden.


Workarounds

Diese Tatsache hat Websitebetreiber rund um den Globus zu verschiedenen Workarounds inspiriert. Anstatt eine Karte einzubinden, verlinken sie beispielsweise direkt auf Google Maps. Doch mit einem externen Link lenkt man Besucher von der eigenen Website und riskiert, dass diese nicht wiederkommen.

Eine andere Lösung ist das Erstellen einer Karte als Bild oder das Nutzen eines bereits bestehenden Stadtplanbildes, wobei man aber unbedingt das Urheberrecht beachten sollte. Beide Varianten haben den Nachteil, dass das bei Google Maps so praktische Zoomen und die Verwendung des Routenplaners nicht möglich sind.


Es geht auch anders...

Für alle, die sich zwar am Design von Google Maps stören, aber gleichzeitig nicht auf den funktionalen Komfort verzichten möchten, gibt es mittlerweile auch eine dritte Möglichkeit: Die gestalterische Anpassung einer Google-Karte. Dafür existieren verschiedene Tools, mit denen man die Farbe von Straßen, Häusern und sogar Flüssen anpassen kann.

Doch in der Regel legt der Webentwickler Hand an. Du designst die Google Maps, wie du möchtest – aber da das Ganze, wie bei einer Website üblich, recht technisch ist, setzt der Webentwickler dies um.

Falls du selbst Webentwickler bist, bietet dir Google einige Code-Beispiele für das Umstyling. Und unter Snazzy Maps findest du zahlreiche Beispielstyles – sogar mit Programmcode, der direkt übernommen werden kann.


Mobile Vorteile

Google Maps bietet in der mobilen Variante den Vorteil, dass man (wenn eingerichtet) auch direkt eine Navigation zum Zielort starten kann. Im Hinblick auf ein individuelles Design wären auch andere mobile Unterstützungen wie z. B. das Kennzeichnen des nächsten Parkplatzes oder öffentlicher Verkehrsmittel etc. denkbar. Hier sind der Kreativität keine Grenzen gesetzt. Wende dich auch dafür an den Webentwickler deines Vertrauens.

Und so kann es dann aussehen, wenn eine Google Map an ein Webdesign angepasst wurde:


Tiger Challenge

WWF zeigt mit ihrem Projekt Tiger Challenge per angepasster Google Maps die Position und Wegstrecke von Tigern in Russland


Level

Die Firma Level hat eine individuelle Google-Karte, die genial animiert ist

(Wenn ihr gerade Lust und Zeit habt, schaut euch die geniale Animation der Navigation an. Das Aufklappen finden wir einfach nur toll – erinnert an eine Karte aus Papier.)


Kurokawa Wonderland

Die angepasste Google Map von URBAN INFLUENCE passt sehr gut ins Gesamtbild der Website

Die Google-Karte findet ihr unter “Map” auf der rechten Seite. Eine sehr starke Anpassung, die aus meiner Sicht wirklich cool aussieht.


Urban Influence

Die coole Google-Karte von kurokawawonderland ist farblich sehr stark an die Website angepasst

Hier mal eine helle Variante – die mit den Beigetönen sehr gut in das Gesamtbild der Website passt.




Wie löst ihr das Problem bisher? Haben eure Kunden schon mal nach einem gestylten Stadtplan gefragt?

zurück
comments powered by Disqus