Google Static Map Maker: Schnelle Straßenkarten für zwischendurch

Sicherlich. Mit Google Maps lassen sich ganz vorzüglich Kartenausschnitte generieren und in Websites einbauen. Wer sich bereits damit beschäftigt hat, wird sich aber dennoch schon desöfteren gefragt haben, ob es da nichts einfacheres gibt. Denn für den Durchschnitts-Netzauftritt des Fleischers um die Ecke reicht im Grunde ein statischer Kartenausschnitt. Da muss man nicht zoomen und klicken können. Der Static Map Maker der New Yorkerin Katy DeCorah kommt da gerade recht…

staticmapmaker-landing

Google Maps sind eine ganz fantastische Sache und in den meisten Fällen, in denen ich sie bislang einsetzte, waren sie mit zusätzlichen Informationen angereichert, etwa Filialstandorten oder Standflächen von Containern. Da fand ich es auch angemessen, einen API-Key anfordern zu müssen, mit dem iFrame zu jonglieren und watt nich alles.

Dann jedoch gab es die einfachen Fälle, die Lohngalvanik im Gewerbegebiet etwa, die gar nicht wollte, dass man frei herumzoomen konnte und so möglicherweise noch direkt den Wettbewerber um die Ecke fand. Oder den Tischler mit nahezu dem gleichen Anliegen. Der wollte aber eher verschleiern, in welcher Gegend seine Bude lag.

In beiden genannten Fällen wies ich die Kunden wahrheitsgemäß darauf hin, dass man zwar auf der eigenen Website so eine Camouflage aufbauen können, etwa durch das Handzeichnen einer statischen Karte, dass das jedoch keinerlei Gewähr dafür böte, dass sich die Besucher nicht die Adresse auskopieren und dann doch Google Maps damit füttern. Dem Vernehmen nach tun sie es nicht und die Strategie erwies sich als goldrichtig. Sagen die Kunden…

flat-27749_640

Für solche Kunden bietet mir nun die New Yorker Entwicklerin Katy DeCorah eine fantastische Arbeitserleichterung, nämlich den Static Map Maker. Der Static Map Maker, der komplett über Codepen (aber nicht nur dort) gehostet wird, was den vollständigen Codezugriff erlaubt (Fortbildung für noppes), erzeugt statische Kartenausschnitte, die man dann als Bild per IMG-Element in wählbaren Formaten in den entsprechenden Web-Auftritt einbauen kann.

Besonders charmant: In aller Regel funktioniert das komplett ohne API-Key! Jedenfalls dann, wenn man die statische Karte nicht dynamisch einbindet. Letzteres kann über einen auf der Tool-Website bereit gestellten Embed-Code auf Wunsch erfolgen und entspricht natürlich dem Google Maps API Guide…

Static Map Maker: So geht’s

Die Verwendung des auf Angular.Js basierenden Tools ist sehr einfach. Über ein linksseitig eingebundenes Formular trägt man die wesentlichen Parameter der zu generierenden Karte ein. Zunächst übergibt man unter Location eine komplette Adresse oder Teile davon, je nachdem, wie präzise die Ortsangabe sein soll. Als nächstes könnte man einen API-Key eintragen, was man jedoch nicht muss, wenn man das erzeugt Bild manuell einbindet.

staticmapmaker-form

Im nächsten Schritt legt man den Zoom-Faktor fest, der definiert, wie nahe der Kartenausschnitt am gesuchten Ort platziert ist oder anders ausgedrückt, welcher Radius rund um den Ort noch angezeigt wird. Über Scale verdoppelt man die unter Width anzugebende Breite des Ausschnitts. Das ist dann nützlich, wenn man eine Breite größer als 640 Pixel benötigt. Über 1.280 Pixel geht es dann aber nicht hinaus. Gewünschte Breiten zwischen 640 und 1.280 Pixel definiert man unter Aktivierung von Scale und Angabe des hälftigen Werts in Width. In gleicher Weise funktioniert die Vergabe des Werts für die Höhe des Ausschnitts mittels Height.

Der Radio-Button Map Marker sorgt dafür, dass die bekannte Stecknadel für die Zielbestimmung im Ausschnitt eingeblendet wird. Aktiviert man diese Funktion, so lässt sich zusätzlich die Farbe und die Größe des Stecknadelkopfes festlegen. Map Type erlaubt die Wahl der Darstellung der eigentlichen Kartenfläche. Roadmap zeigt eine Darstellung als Straßenkarte, Terrain zeigt die topografische Geländeansicht, Satellite die gewohnte Satellitenansicht und mit Hybrid verbindet man Satelliten- und Kartenansicht.

Mittels Format wählen Sie das Speicherformat des zu erstellenden Bildes. Zur Wahl stehen je zwei PNG- und JPG-Formate, sowie das GIF-Format. Aktivieren Sie Visual Refresh, wenn Ihre Karte im Look des neuen Google Maps dargestellt werden sollen. Aus dem Feld Gimme können Sie schlussendlich den API-Call zur dynamischen Generierung des statischen Ausschnitts aus- und in den IMG-Tag auf Ihrer Website einkopieren. (Oder Sie greifen sich mit gedrückter linker Maustaste den erzeugten Ausschnitt und legen ihn auf Ihrem Desktop zum manuellen Upload ab, was Sie dann natürlich noch erledigen müssen.)

So entsteht innerhalb von zwei Minuten ein Kartenausschnitt, den auch mein Galvaniseur, sowie mein Tischler goutieren würden.

Links zum Beitrag

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
ati
Gast
ati
2 Jahre 10 Monate her

Tolle Sache, aber was sagt Google bzgl. Rechte und Lizenzen?

Andreas
Gast
2 Jahre 10 Monate her

…würde mich auch mal interessieren.
Google sagt ja, das keine ScreenShots gemacht werden dürfen, sondern nur alles direkt vom Server geladen werden muss.

Thomas
Gast
Thomas
2 Jahre 10 Monate her

Das Einbinden und parametrisieren der google Maps API ist wirklich simpel.
Für die Fleischer an der Ecke: w3schools.com

Anna Blume
Gast
Anna Blume
2 Jahre 9 Monate her

Zu schön um wahr zu sein, vermute ich. Die Karte als z.B. jpg abspeichern und manuell in die Website einbinden und Google reicht der kleine Google-Hinweis auf der Karte?

Wenn es so ein Tool für OpenStreetMap gäbe, wäre mir wohler.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen