Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 26. September 2013

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

Sicherlich. Mit Google Maps las­sen sich ganz vor­züg­lich Kartenausschnitte gene­rie­ren und in Websites ein­bau­en. Wer sich bereits damit beschäf­tigt hat, wird sich aber den­noch schon desöf­te­ren gefragt haben, ob es da nichts ein­fa­che­res gibt. Denn für den Durchschnitts-Netzauftritt des Fleischers um die Ecke reicht im Grunde ein sta­ti­scher Kartenausschnitt. Da muss man nicht zoo­men und kli­cken kön­nen. Der Static Map Maker der New Yorkerin Katy DeCorah kommt da gera­de recht…

staticmapmaker-landing

Google Maps sind eine ganz fan­tas­ti­sche Sache und in den meis­ten Fällen, in denen ich sie bis­lang ein­setz­te, waren sie mit zusätz­li­chen Informationen ange­rei­chert, etwa Filialstandorten oder Standflächen von Containern. Da fand ich es auch ange­mes­sen, einen API-Key anfor­dern zu müs­sen, mit dem iFrame zu jon­glie­ren und watt nich alles.

Dann jedoch gab es die ein­fa­chen Fälle, die Lohngalvanik im Gewerbegebiet etwa, die gar nicht woll­te, dass man frei her­um­zoo­men konn­te und so mög­li­cher­wei­se noch direkt den Wettbewerber um die Ecke fand. Oder den Tischler mit nahe­zu dem glei­chen Anliegen. Der woll­te aber eher ver­schlei­ern, in wel­cher Gegend sei­ne Bude lag.

In bei­den genann­ten Fällen wies ich die Kunden wahr­heits­ge­mäß dar­auf hin, dass man zwar auf der eige­nen Website so eine Camouflage auf­bau­en kön­nen, etwa durch das Handzeichnen einer sta­ti­schen Karte, dass das jedoch kei­ner­lei Gewähr dafür böte, dass sich die Besucher nicht die Adresse aus­ko­pie­ren und dann doch Google Maps damit füt­tern. Dem Vernehmen nach tun sie es nicht und die Strategie erwies sich als gold­rich­tig. Sagen die Kunden…

flat-27749_640

Für sol­che Kunden bie­tet mir nun die New Yorker Entwicklerin Katy DeCorah eine fan­tas­ti­sche Arbeitserleichterung, näm­lich den Static Map Maker. Der Static Map Maker, der kom­plett über Codepen (aber nicht nur dort) gehos­tet wird, was den voll­stän­di­gen Codezugriff erlaubt (Fortbildung für nop­pes), erzeugt sta­ti­sche Kartenausschnitte, die man dann als Bild per IMG-Element in wähl­ba­ren Formaten in den ent­spre­chen­den Web-Auftritt ein­bau­en kann.

Besonders char­mant: In aller Regel funk­tio­niert das kom­plett ohne API-Key! Jedenfalls dann, wenn man die sta­ti­sche Karte nicht dyna­misch ein­bin­det. Letzteres kann über einen auf der Tool-Website bereit gestell­ten Embed-Code auf Wunsch erfol­gen und ent­spricht natür­lich dem Google Maps API Guide…

Static Map Maker: So geht’s

Die Verwendung des auf Angular.Js basie­ren­den Tools ist sehr ein­fach. Über ein links­sei­tig ein­ge­bun­de­nes Formular trägt man die wesent­li­chen Parameter der zu gene­rie­ren­den Karte ein. Zunächst über­gibt man unter Location eine kom­plet­te Adresse oder Teile davon, je nach­dem, wie prä­zi­se die Ortsangabe sein soll. Als nächs­tes könn­te man einen API-Key ein­tra­gen, was man jedoch nicht muss, wenn man das erzeugt Bild manu­ell ein­bin­det.

staticmapmaker-form

Im nächs­ten Schritt legt man den Zoom-Faktor fest, der defi­niert, wie nahe der Kartenausschnitt am gesuch­ten Ort plat­ziert ist oder anders aus­ge­drückt, wel­cher Radius rund um den Ort noch ange­zeigt wird. Über Scale ver­dop­pelt man die unter Width anzu­ge­ben­de Breite des Ausschnitts. Das ist dann nütz­lich, wenn man eine Breite grö­ßer als 640 Pixel benö­tigt. Über 1.280 Pixel geht es dann aber nicht hin­aus. Gewünschte Breiten zwi­schen 640 und 1.280 Pixel defi­niert man unter Aktivierung von Scale und Angabe des hälf­ti­gen Werts in Width. In glei­cher Weise funk­tio­niert die Vergabe des Werts für die Höhe des Ausschnitts mit­tels Height.

Der Radio-Button Map Marker sorgt dafür, dass die bekann­te Stecknadel für die Zielbestimmung im Ausschnitt ein­ge­blen­det wird. Aktiviert man die­se Funktion, so lässt sich zusätz­lich die Farbe und die Größe des Stecknadelkopfes fest­le­gen. Map Type erlaubt die Wahl der Darstellung der eigent­li­chen Kartenfläche. Roadmap zeigt eine Darstellung als Straßenkarte, Terrain zeigt die topo­gra­fi­sche Geländeansicht, Satellite die gewohn­te Satellitenansicht und mit Hybrid ver­bin­det man Satelliten- und Kartenansicht.

Mittels Format wäh­len Sie das Speicherformat des zu erstel­len­den Bildes. Zur Wahl ste­hen je zwei PNG- und JPG-Formate, sowie das GIF-Format. Aktivieren Sie Visual Refresh, wenn Ihre Karte im Look des neu­en Google Maps dar­ge­stellt wer­den sol­len. Aus dem Feld Gimme kön­nen Sie schluss­end­lich den API-Call zur dyna­mi­schen Generierung des sta­ti­schen Ausschnitts aus- und in den IMG-Tag auf Ihrer Website ein­ko­pie­ren. (Oder Sie grei­fen sich mit gedrück­ter lin­ker Maustaste den erzeug­ten Ausschnitt und legen ihn auf Ihrem Desktop zum manu­el­len Upload ab, was Sie dann natür­lich noch erle­di­gen müs­sen.)

So ent­steht inner­halb von zwei Minuten ein Kartenausschnitt, den auch mein Galvaniseur, sowie mein Tischler gou­tie­ren wür­den.

Links zum Beitrag

Dieter Petereit

Dieter Petereit

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.

5 Kommentare

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

Schreibe einen Kommentar

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