Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

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.

Login bei Google
Login bei Google

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

Die Developer-Bereiche von Google
Die Developer-Bereiche von Google

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.

Aktivierte »Static Maps API« in der API-Übersicht von Google
Aktivierte »Static Maps API« in der API-Übersicht von Google

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

Zugangsdaten und API-Key
Zugangsdaten und API-Key

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. 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.


http://maps.googleapis.com/maps/api/staticmap?center=Berlin,Deutschland&size=550x400&zoom=11&maptype=hybrid&markers=Neuk%C3%B6lln,Berlin,Deutschland&key=AIzaSyCKGbEkbSnCkgxS4Iv7pRD5fOvPRp4GtNA
Live-Beispiel des oben gezeigten Codes

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-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.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 8 Kommentare

  1. Nico
    schrieb am 21.12.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.

    Antworten
  2. Johannes
    schrieb am 20.10.2015 um 15:55 Uhr:

    Ist es möglich über die URL auch Kartenebenen zu aktivieren bzw. zu deaktivieren?
    Vielen Dank,
    MfG

    Antworten
  3. D.A.
    schrieb am 16.12.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 ?

    Antworten
  4. Sven
    schrieb am 07.08.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.

    Antworten
  5. John Leron
    schrieb am 06.08.2014 um 09: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..

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 06.08.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.

      Antworten
  6. Jens Wiese
    schrieb am 06.08.2014 um 08: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.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 06.08.2014 um 09: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.

      Antworten

Schreibe einen Kommentar zu Nico Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →