Google Static Maps – zeigen Sie Ihren Standort

Hinweis: zur dieser Anleitung gibt es eine Aktualisierung: Google Static Maps – zeigen Sie Ihren Standort (Google Static Maps API, V2)

Für all jene, die gerne auf der eigenen Website eine Karte mit dem eigenen (Firmen)standort darstellen möchten, denen aber Google Maps zu kompliziert ist, gibt es jetzt eine einfache Alternative. Mit Google Static Maps können Karten ohne viel Aufwand auf der eigenen Website eingebunden werden.

Google Maps, der Kartendienst von Google,  hat sich zu einem vielseitigen Werkzeug  entwickelt. Man kann damit auf der eigenen Website eine Karte einbauen, in welcher z.B. der eigene Firmenstandort dargestellt wird. Dazu ist es jedoch notwendig JavaScript Code in die eigene Seite zu integrieren. Und dies gestaltet sich oftmals schwierig. So lassen beispielsweise Content Management Systeme die Einbindung von JavaScript nicht ohne weiteres zu.

Da sieht man sich leicht der Versuchung ausgesetzt, einfach einen Screenshot auf Google Maps anzufertigen und diesen als Bild einzubauen. Aber Vorsicht, denn dies ist verboten. Mittels Google Static Maps bietet sich eine wesentlich vielseitigere Alternative, die fast genau so einfach zu verwenden ist. Ein weiterer Vorteil: es ist keine Grafikbearbeitung notwendig.

Um die Static Map von Google auf der Website zu verwenden wird einfach ein Bild auf der Website eingefügt, dessen Quelle Google ist. Die Darstellung des hervorzuhebenden Standorts wird einfach mit dem „Google Static Map Wizard” eingerichtet.

So sieht eine solche Map dann aus:

Die Erstellung eines solchen Kartenausschnittes inklusive Standort-Markierung dauert nur fünf Minuten:

Hinweis: zur dieser Anleitung gibt es eine Aktualisierung:
Google Static Maps – zeigen Sie Ihren Standort (Google Static Maps API, V2)

  1. Wenn noch nicht vorhanden, einen Google Maps API Key kostenlos bei Google beantragen.
  2. Den Google Static Map Wizard aufrufen.
  3. Im Assistenten bei Punkt 1 die eigene Adresse angeben – am besten inklusive Länderangabe und mit “Create Marker Here” bestätigen. (z.B. „Hauptstrasse 10, 8020 Graz, Österreich”).
  4. Unter Punkt 2 die Größe des gewünschten Bildes sowie die Farbe und Größe des Markers angeben (z.B. 450 x 300 Pixel, …).
  5. Unter Punkt drei kann man nun den erstellen Link kopieren. Am Ende dieses Links muss dann noch der eigene (oben angeforderte) Google Maps API Key angehängt werden.
  6. In der eigenen Website ein Bild einfügen und als Quelle (src) den eben erstellen Link angeben (z.B. “<img src=http://google…>”)
  7. Schon hat man eine Karte mit der Kennzeichnung der eigenen Position auf der Website eingefügt.

Über die weiteren Möglichkeiten mit Google Static Maps demnächst mehr in meinem Blog.

Getagged mit:
Veröffentlicht unter Allgemein, Web, HTML, CSS

Hinterlasse eine Antwort

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

*

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>

Archiv