Static Google Maps – bessere Karten im Responsive Design?

Von Jonas

In diesem Beitrag erfahrt ihr wie Static Google Maps funktionieren, und welche Vor- und Nachteile die Technik hat.

Aktualisiert am 5. August 2014 8 Kommentare

Vor einiger Zeit habe ich einen Beitrag verfasst, in dem erklärt wird, wie Google Maps in flexiblen Web-Layouts eingebettet werden kann. In diesem Beitrag möchte ich eine – für meinen Geschmack benutzerfreundlichere – Alternative vorstellen und gerne in den Kommentaren diskutieren. Googles Kartendienst wird hierbei als automatisch generierte, statische Grafik (Static Map) eingebunden und verlinkt auf den Kartendienst.

Der Unterschied zwischen eingebetteten Google Maps und Static Maps

Normalerweise wird Google Maps als iframe in eine Website eingebunden. Diese Vorgehensweise hat Vor- und Nachteile.

Vorteile

• Ein iframe integriert den Kartendienst mit voller Funktionalität in die Website. Es kann gescrolled, gezoomt und die Art der Darstellung verändert werden
• Google Maps mit voller Funktionalität ist benutzerfreundlich, zumindest sofern eine Mouse benutzt wird
• Die Einbindung des iframe ist unkompliziert. Google stellt das Code-Snippet auf Google Maps bereit

Nachteile

• Die Ladezeit wird durch zusätzliche und ggf. überflüssige Funktionalität negativ beeinflusst
• Ein iframe ist mitunter ein sehr unflexibles Element – im responsive Design ist eine solche Lösung sehr lästig und zeitaufwendig
• Eine iframe-Lösung ist auf kleinen Bildschirmen oder Touch-Screens nicht benutzerfreundlich
• Es wird ein API-Key benötigt

Wenn die Karte als sog. »Static Google Map« eingebunden wird, verwendet man ein ganz normales Bild, das dann später auf die Adresse bei Google Maps verlinkt. Dieses Bild kann als img-Tag im HTML-Code oder als CSS-background eingebunden werden. Die Grafik wird dabei direkt über Google gerendert, ihr verwendet als Bildquelle eine URL mit Parametern für die Größe, die Art und die Position der Karte, für den Zoomfaktor etc. Auch diese Vorgehensweise hat Vor- und Nachteile:

Vorteile

• Ein Bild im HTML-Code kann problemlos skaliert werden, im CSS-Code stehen dazu ebenfalls verschiedene Möglichkeiten zur Verfügung
• Deutlich bessere Performance
• Benutzerfreundlich auf allen Display-Größen, sowie bei Mouse- und Touch-Bedienung
• Unkomplizierte Handhabung
• Kein JavaScript

Nachteile

• Die Interaktivität geht verloren – es handelt sich um eine statische Grafik
• Der User verlässt die Website
• Es wird ein API-Key benötigt (siehe unten)
• Die maximale Seitenlänge beträgt 660px. Für größere Karten ist ein kostenpflichtiger Google-Account notwendig

Funktionen abgeben

In letzter Zeit ist – vor allem im Umfeld von responsive Design – ein klarer Trend zu erkennen: Komplexe oder benutzerunfreundliche Funktionen werden zunehmend an die Betriebssysteme oder an (Web-)Apps abgegeben.
Im Fall vom Google Maps muss man sich als Webdesigner fragen, welche Vorteile sich ein Website-Besucher von einer Karte verspricht. Normalerweise sind das folgende Ziele:

• Die Karte dient der Übersicht
• Die Karte dient der Orientierung
• Der User soll eine Route berechnen können

Angenommen wir machen uns die Arbeit und schaffen es den Google Maps iframe mitsamt seiner Funktionalität flexibel in unsere responsive Website zu integrieren. Der kleine Kartenausschnitt ist auf Smartphones und vielen Tablets dennoch nie so gut wie die installierte Google-Maps-App des Geräts.
Wenn wir Google Maps hingegen als statische Grafik einbinden, schonen wir im ersten Schritt die Performance. Der Anwender muss keine Funktionalität laden, wenn er sie nicht braucht. Wenn er mehr als eine Übersichtskarte benötigt, klickt oder tippt er die Karte an und wird auf Google Maps weitergeleitet. Am Computer erhält er den Kartendienst, auf mobilen Endgeräten wird – sofern vorhanden – die App geöffnet. Wenn die App nicht installiert ist, wird die mobile Website von Google Maps geöffnet.

So geht’s: Static Maps in die Website integrieren

Um Static Maps verwenden zu können, benötigt ihr zunächst einen API-Key. Anhand des Keys erkennt Google wie oft die Karte aufgerufen wurde. Bei Webseiten mit starkem Besucheraufkommen wird Google Maps kostenpflichtig (das gilt übrigens auch für die iframe-Version).

API-Key generieren lassen

API-Keys für die verschiedenen Google-Dienste lassen sich recht unkompliziert erstellen.

Loggt euch unter https://code.google.com/apis/console mit eurem Google-Konto ein und wählt anschließend den Menüpunkt »APIs & Auth«.

Auf der darauf folgenden Seite seht ihr eine Liste der verfügbaren APIs. Wählt hier den Eintrag »Static Maps API« und aktiviert auf der nächsten Seite den Dienst. Ihr solltet nun den API-Key (Schlüssel) angezeigt bekommen.

Wenn der Dienst bereits aktiviert ist, reicht ein Klick auf den Menüpunkt »Credentials« um den »Key for browser applications« anzuzeigen.

Static Google Maps-URL erzeugen

Wie bereits erwähnt, wird die statische Karte als URL eingebunden. Folgende minimal notwendige Struktur wird dabei zugrunde gelegt:

https://maps.googleapis.com/maps/api/staticmap?center=[ORT,LAND]& size=[BREITExHÖHE]&key=[API-KEY]

Unbedingt notwendig sind Angaben für die Abmessung der Karte, die gewünschte Position und der API-Key. Über zusätzliche Parameter kann die Karte verändert oder ergänzt werden. Folgende Parameter sind besonders interessant:

center

Mittelpunkt der Karte. Möglicher Wert: Eine Ortsangabe inkl. Land

size

Breite und Höhe der generierten Grafik. Mögliche Werte: Breite in Pixeln x Höhe in Pixeln (z. B. 400×300)

key

Der API-Key

zoom

Zoomstufe der Karte. Mögliche Werte: 0 (weit entfernt) – 22 (nah)

format

Dateiformat der Grafik. Mögliche Werte: png (standard), jpg, gif

maptype

Visuelles Erscheinungsbild der Karte. Mögliche Werte: roadmap, terrain, satellite, hybrid

scale

Retina-Version. Möglicher Wert: 2

markers

Markierung auf der Karte. Für die Position der Markierung muss ein Ort angegeben werden. Die Markierung selbst kann detailliert angepasst werden, schaut euch dazu den Static Maps Maker am Ende des Artikels an.

Eine funktionierende URL sieht dann z. B. wie folgt aus, und kann sowohl als HTML-Image als auch als CSS-Background eingebunden werden.

https://maps.googleapis.com/maps/api/staticmap?center=Berlin,Deutschland&size=550x400&zoom=11&maptype=hybrid&markers=Neuk%C3%B6lln,Berlin,Deutschland&key=AIzaSyCKGbEkbSnCkgxS4Iv7pRD5fOvPRp4GtNA

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing