Static Google Maps – bessere Karten im Responsive Design?

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.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
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 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
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:
http://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. 400x300)
- 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.
http://maps.googleapis.com/maps/api/staticmap?center=Berlin,Deutschland&size=550x400&zoom=11&maptype=hybrid&markers=Neuk%C3%B6lln,Berlin,Deutschland&key=AIzaSyCKGbEkbSnCkgxS4Iv7pRD5fOvPRp4GtNA
Tools zum generieren der Static Maps URL
Wenn ihr den Code für die Karte generieren lassen möchtet, schaut euch unbedingt den Static Google Maps Maker an. Alle Tools zu diesem Thema findet ihr hier.
Links / Quellen
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Unterstützung bei Responsive Design-Projekten
Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →
Das könnte dich auch interessieren
8 Kommentare
Kommentar verfassen
Jens Wiese
Verfasst am 6. August 2014 um 8:15 Uhr.
Da ich das ganze gerade für ein Redesign von Biodukte erprobe habe ich noch einen weiteren großen Nachteil für die Liste. Und zwar die maximale Seitenlänge von 660 Pixeln.
Nur mit einem (kostenpflichtigen) Business Account bekommt man von Google auch Ausschnitte mit größerer Seitenlänge.
Jonas Hellwig
Verfasst am 6. August 2014 um 9:36 Uhr.
Hallo Jens, vielen Dank für die Ergänzung. Ich habe den Beitrag aktualisiert.
Ich persönlich bin allerdings der Meinung, dass man bei einem kommerziellen Projekt nicht auch noch erwarten kann einen so komplexen Dienst wie Google Maps uneingeschränkt kostenlos nutzen zu können. Ich hätte kein Problem damit für die Einbindung zu bezahlen. Zumal es ja auch kostenlose Open Source Alternativen gibt.
John Leron
Verfasst am 6. August 2014 um 9:37 Uhr.
Wo ist der unterschied zum einbinden eines Screenshots der Karte? Dafür benötige ich auch keinen premium accout für Eibe größere Karte..
Jonas Hellwig
Verfasst am 6. August 2014 um 10:41 Uhr.
Also abgesehen davon, dass man nicht einfach einen Screenshot von Google Maps einbinden darf, besteht der Unterschied darin, dass die Karte direkt von Google gerendert wird. Sie ist also immer aktuell. Auch die Parameter können verändert werden um die Karte »mal eben« anzupassen.
Sven
Verfasst am 7. August 2014 um 20:51 Uhr.
Ergänzende Kommentare meinerseits:
Standardgröße ist 640×640, mit scale=2 bekommt man ein 1280x1280px Bild raus. Ein API-Key wird nicht benötigt.
Als Unternehmer (sollte man eh für Dienstleistungen Geld ausgeben) bekommt man max. 2048x2048px. Eine registrierung und ein API-Key ist notwendig.
Das Bild kann im Sinne von Responsive Webdesign verkleinert werden, man sollte darauf achten, das die Schrift im Bild (z.B. Straßennamen) nicht zu klein und unleserlich wird. Aber grundsätzlich bin ich absolut dafür auf kleinen Dislplays nur ein Bild von einer Karte auszugeben. Auf größeren Display kann man dann onclick/-touch die dynamische Map nachladen.
D.A.
Verfasst am 16. Dezember 2014 um 15:35 Uhr.
warum das ganze nicht gleich als onclick=“show_google_map();“ variante umbauen, und mit jQuery das statische Bild gegen das iframe austauschen ?
Johannes
Verfasst am 20. Oktober 2015 um 15:55 Uhr.
Ist es möglich über die URL auch Kartenebenen zu aktivieren bzw. zu deaktivieren?
Vielen Dank,
MfG
Nico
Verfasst am 21. Dezember 2016 um 17:12 Uhr.
Mein Vorschlag wäre, wenn auch etwas zeitaufwendiger: Man bindet eine Karte (die dynamische von Maps) mehrfach auf seiner Website ein, so das jeweils die gängigen Pixelbreiten abgedeckt sind. Bis auf die zutreffende Karte werden dann alle anderen ausgeblendet. Der Aufwand ist zwar etwas größer, aber so ist das Ergebnis das beste, mit IQuery. Dafür muss man den Karten natürlich verschiedene ID´s zuordnen.