webdesign-bamberg.net

webdesign und medien blog aus Bamberg

  • Home
  • SEO
  • Social Media
  • Empfehlungen
  • Über den Blog

Quicktipp: Statische Karten mit Google Static Maps API

comment  Florian Köhler   

comment 14.05.2013    comment keine Kommentare

Allgemein

Da Google in seinen Richtlinien klar vorgibt, dass Karten nur in der vorgesehenen Form, also über Iframe oder API, einzubinden sind, ist es demnach nicht erlaubt, einen Screenshot einer Google Map auf einerWebseite im Netz zu veröffentlichen. Doch was tun, wenn ein statisches Bild die einzige Möglichkeit darstellt?

Die Lösung: das Google Static Maps API

Mit dem Google Static Maps API ist dies ohne größere Probleme möglich. Das Prinzip dabei ist denkbar einfach. Aus der statischen Adresse

https://maps.googleapis.com/maps/api/staticmap?

sowie einigen angehängten und mit einem “&”-Symbol verknüpften Parameter/ Wert- Paaren wird eine URL aufgebaut, bei deren Aufruf serverseitig eine Karte generiert und automatisch als PNG (Standard) zurückgegeben wird. Diese URL dient somit als Quelle (src) für das <img>- Tag. Damit der Kartenausschnitt auf der Seite angezeigt wird ist also weder Javascript noch ein Iframe erforderlich.

Zu beachten ist dabei lediglich, dass

- ab 25.000 Anfragen pro Tag ein API Key benötigt wird, um ein zusätzliches Kontingent erwerben und freischalten zu können.

- die Static Maps-URLs maximal 2048 Zeichen lang sein dürfen. Bei Karten mit vielen zusätzlichen Attributen und Markern kann dies unter Umständen nicht ausreichen.

Die wichtigsten Parameter

Zoom-Stufe (zoom)
Definiert die Zoom-Stufe der Karte. Erlaubt sind ganzzahlige Werte von 0 (Weltkarte) bis 21 (bei Satellite-Typ in Städten einzelne Häuser sichtbar).

Kartengröße (size)
Dieser Parameter ist zwingend erforderlich und legt die Dimensionen der angeforderten Karte fest. Breite und Höhe werden dabei mit “x” voneinander getrennt.

Sensor – Wert (sensor)
Der Sensor-Wert ist ebenfalls zwingend erforderlich und gibt an, ob der aktuelle Standpunkt (falls möglich) übertragen werden soll (true) oder nicht (false).

Center-Position (center)
Der Parameter center legt den Mittelpunkt der Karte fest. Als Werte können sowohl durch Komma getrennte Angaben von Längen- und Breitengrad  also auch mit Komma voneinander getrennte Anschriften verwendet werden. (erforderlich)

Marker
Auch auf der Karte eingezeichnete Marker werden unterstützt. Dieses können optional durch den angehängten Parameter markers angegeben werden. Der Wert eines solchen Markers besteht dabei aus der Angabe des Markerstyles (z.B. color: blue), einem Label (z.B. label:A) und den mit Komma getrennten Koordinaten (z.B. 40.711614,-74.012318).

Alle diese Angaben sind untereinander das pipe-Symbol “|” (%7C) voneinander getrennt.

Neben den genannten Parametern unterstützt das Google Static Map noch unzählige weitere Angaben, wie beispielsweise das von mir in dem Artikel Google Maps mit mehr Style beschriebene Kartenstyling, Kartentypen oder auch Anzeige von Routen oder Polygonen.

Alle Infos zu den einzelnen Parametern sowie einige Beispiele findet ihr im Entwicklerhandbuch des Google Static Maps API.

Beispiele

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&zoom=12&size=400×400&sensor=false

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&zoom=14&size=600×150&sensor=false

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&zoom=17&size=150×150&sensor=false

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&maptype=terrain&zoom=16&size=600×150&sensor=false

https://maps.googleapis.com/maps/api/staticmap?center=49.8935094,10.8849731&zoom=14&size=600×150&sensor=false&markers=color:orange|label:W|49.8935094,10.8849731


Über diesen Artikel

Dieser Beitrag wurde unter Allgemein abgelegt am 14. Mai 2013 von .

Autor des Artikels: Florian Köhler

Florian Köhler

Als Autor dieses Blogs und Inhaber der Werbeagentur Webtwist bin ich immer auf der Suche nach interessanten Trends, Neuheiten und Hintergrundberichte in den Themenbereichen Mediendesign, SEO und Social Media.

» Artikel: Alle Beiträge von Florian Köhler
» Website: https://www.webtwist.de

Artikel-Navigation

← Freie Zeit sinnvoll nutzen – 15 Tipps für Freelancer und Selbstständige
Share-Button: Facebook vereinfacht Teilen-Funktion →

Hinterlasse eine Antwort Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

CAPTCHA-Bild
Bild neuladen

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Seite durchsuchen

Populärste Artikel

Erstellen einer Wetterkarte mit Hilfe des yr.no XML-Service und JQuery
wetter_karte2
Corporate Blogs – Warum bloggen für Unternehmen wichtig ist
artikel_blogging
Google Maps mit Javascript einfärben – Graustufen, Styling
preview_image
Inhalt – der Schlüssel zum Erfolg einer Webseite
content_erfolg_webseite

Anzeige

Kategorien

  • Allgemein
  • Blogging
  • Fehler
  • Fotografie
  • HTML
  • Inhalte
  • Inspiration
  • Javascript
  • JQuery
  • Konzeption
  • Online Marketing
  • Programmierung
  • Projekte
  • Pupulär
  • Quicktipp
  • Social Media
  • Suchmaschinenoptimierung
  • Tutorial
  • Typo3
  • Webdesign

Anzeige

Anzeige

Blogroll

  • Dokumentation
  • FAQ
  • News-Blog
  • Support Forum
  • Themepool
  • WordPress-Planet
¹ Kann Spuren von Kreativität enthalten
Copyright © 2010-2019 Webtwist - Werbeagentur, Webdesign Bamberg
»Impressum »Datenschutz