Workshop: GoogleMaps auf der eigenen Website

Mit Hilfe von GoogleMaps kann man leicht interaktive Karten in die eigene Website einbinden. Wir zeigen die Schritte von der Integration einer einfachen Umgebungskarte bis hin zu einem komplexen Filialenfinder.

Kartenmaterial innerhalb einer Website – beispielsweise als Anfahrtsbeschreibung – gehört heute zum Standard jedes professionellen Webauftritts. Wer allerdings meint, er könnte einfach bestehende Stadtpläne einscannen oder Screenshots von Online-Stadtplänen einbinden, verstößt damit gegen das Urheberrecht und kann mit einer Abmahnung rechnen.

Verwendet man stattdessen GoogleMaps, kann das nicht passieren. Mit GoogleMaps bietet Google einen kostenlosen Kartendienst an. Dieser verfügt über eine Javascript-API, über die jeder Website-Betreiber dynamische Karten in die eigene Site integrieren kann. Der angezeigte Kartenausschnitt lässt sich dabei mit der Maus verschieben, und die Karten sind stufenweise scrollbar.

Wer tiefer in das API von GoogleMaps einsteigt, findet dort auch Funktionen zum Markieren von Punkten in einer Karte, und natürlich zum Auffinden von Adressen auf Basis von Straßen-, Orts- und Länderangaben. Damit lassen sich, wie dieses Tutorial zeigen wird, mit etwas Programmieraufwand auch automatische Anfahrtsskizzen oder Übersichtskarten generieren.

In diesem ersten Teil erläutern wir die Grundlagen der GoogleMaps, wie Sie Kartenausschnitte anzeigen lassen und wie Sie Adressen in Geo-Koordinaten umrechnen lassen. Im demnächst erscheinenden zweiten Teil des Workshops zeigen wir Ihnen, wie Sie Markierungen einblenden und wie Sie Webseite und GoogleMap weiter verknüpfen.