Normalerweise arbeitet man beim Einbinden von Google-Maps-Karten mit der Maps JavaScript API, die einen API-Key voraussetzt und bei höheren Zugriffszahlen nicht zu unterschätzende Kosten verursachen kann. Dabei gibt es tolle Alternativen wie mapbox oder OpenStreetMap, die aber noch nicht die Featurevielfalt von Google erreichen. Google selbst bietet auch einen Weg ohne API Key über die Teilen-Funktion an, die wir für unsere Zwecke nutzen können.
Diesen Weg kann man programmatisch nutzen, um beliebige Adressen (sogar ohne Kenntnis von Längen- und Breitengrad) auszugeben. Obendrein enthält die Karte (im Gegensatz zum JS-Pendant) einen Link zum Routenplaner. Die Karte lässt sich außerdem mit Hilfe von CSS-Filtern auch etwas aufhübschen (wenngleich das Ergebnis nicht ganz an die nativen Styles heranreicht, die mit der JS-API möglich sind).
Viele Jahre kursierte dazu der Weg über den Parameter output=embed, den Google offiziell aber nicht unterstützt und es damit in der jüngeren Vergangenheit vermehrt zu Anzeigefehlern kommt:
331190767bb32b2468632e609223c53e
Nutzt man über maps.google.de die offizielle Teilen-Funktion, erhält man beispielsweise folgenden Code:
331190767bb32b2468632e609223c53e
Wenn wir die lange URL im Parameter src etwas strukturieren, ergibt sich ein Muster:
331190767bb32b2468632e609223c53e
Dabei erkennen wir folgende Datentypen:
- m: Matrix
- s: String
- f: Float
- d: Double
- i: Integer
- e: Enum
Nach ein paar Trial & Error Versuchen können wir einige Werte eliminieren und die wichtigsten Werte in Variablen verpacken, um beispielsweise die Adresse dynamisch festzulegen:
331190767bb32b2468632e609223c53e
Wir können abschließend z.B. mit Hilfe des folgenden CSS-Codes die Karte aufhübschen hinzufügen:
331190767bb32b2468632e609223c53e
Am Ende erhalten wir eine kostenlos nutzbare, dynamische Map, die zuverlässig funktioniert: