Google-Maps mit individuellen Koordinaten einbinden

In den meisten Fällen ist die Integration von Google-Maps-Kartenmaterial mittels der Standard-Variante die einfacher zu realisierende Variante. Doch bei dieser Herangehensweise stößt man recht schnell an Grenzen der Möglichkeiten, vor allem dann, wenn Gebäude, Plätze oder anderweitige Positionen angezeigt werden sollen, die beispielsweise nicht über eine eigene Adresse / Hausnummer verfügen.

1. Lokalisieren Sie die gewünschte Positionen
Rufen Sie zunächst die Seite zur Bestimmung der Koordinaten auf und Positionieren Sie mit der Maus den gewünschten Ort. Dies kann beispielsweise der Kirchenvorplatz, ein Gebäude, oder ein Ort auf der grünen Wiese sein. Nach dem Mausklick werden Ihnen die Koordinaten in einer kleinen Sprechblase angezeigt. Notieren Sie sich diese Koordinaten, oder kopieren Sie sie in die eine Textdatei. Sie benötigen diese Koordinaten zu einem späteren Zeitpunkt um den gewünschten Punkt auf der Karte anzuzeigen.

Abbildung: Mit Hilfe der Koordinatensuche können Sie einen individuellen Ort für Ihren Positionsmarker auswählen

2. Die Steuerdatei „googlemaps.js“
Um das Kartenmaterial auf Ihren Seiten integrieren zu können, benötigen Sie eine Steuerdatei für Google-Maps in Ihrem Projekt. Diese haben wir bereits weitestgehend für Sie vorbereitet und Sie müssen diese lediglich durch Ihre eigenen Angaben (Koordinaten, Name, Adresse, Telefon etc.) ergänzen. Speichern (Rechte Maustaste "Ziel speichern unter...") Sie diese Datei zunächst auf Ihrem Rechner um Sie im nächsten Schritt hochzuladen.
 

3. Hochladen der Steuerdatei „googlemaps.js“
Wechseln Sie nun im OpenCms-Arbeitsplatz in das Verzeichnis „_configuration“ und laden anschließend die Datei mit der Schaltfläche Hochladen in dieses Verzeichnis hoch. War dieser Arbeitsschritt erfolgreich, befindet sich in diesem nun die Datei „googlemaps.js“.

Abbildung: Es hat geklappt! Im Verzeichnis "_configuration" befindet sich nun die Datei "googlemaps.js"

4. Editieren der Steuerdatei „googlemaps.js“
Rufen Sie die Datei „googlemaps.js“ nun über Kontextmenü Quelltext editieren zum bearbeiten auf. Erschrecken Sie nicht über die zahlreichen Zeilen von Quelltext! Die zu bearbeitenden Positionen haben wir durch Absätze und Kommentare für Sie gut kenntlich gemacht.
 

Abbildung: Alle wesentlichen Stellen im Quelltext sind kenntlich gemacht

4a. Einfügen der ermittelten Koordinaten
Tragen Sie in Zeile 20 und 24 die zuvor mit der Seite "Google-Maps Koordinaten bestimmen" ermittelten Werte ein. In der Regel werden sind die verwendeten Koordinaten in beiden Fällen identisch, haben aber unterschiedliche Aufgaben: Der in Zeile 20 eingegebene Wert stellt den Kartenmittelpunkt dar, während die in Zeile 24 eingegebene Position den eigentlichen Marker setzt. Achten Sie darauf die vorgegebene Syntax des Quelltextes nicht zu ändern.

Abbildung: Fügen Sie die zuvor ermittelten Koordinaten in Zeile 20 und in Zeile 24 ein

4b. Einfügen der Positionsbeschreibung
Wechseln Sie anschließend in die Zeile 37 und ändern dort die vorgegebene Anschrift durch Ihre eigene aus. Der hier eingegebene Text ist die spätere Beschreibung des Positionsmarkers innerhalb der Karte.

Abbildung: Abändern des Positionsmarkertextes in Zeile 37. Der hier eingegebene Text erscheint in der späteren Kartenansicht als Sprechblase

Speichern Sie die Änderungen durch einen Klick auf Speichern und Schließen ab. Sie kehren dadurch automatisch auf den OpenCms-Arbeitsplatz zurück.


5. Download des vorbereiteten Quelltextes
Im Folgenden müssen Sie nun die Datei bearbeiten, die im Anschluss das Kartenmaterial beherbergen soll. Zunächst sollten Sie sich aber den Quelltext herunterladen, der die HTML-Seite mit der zuvor erstellten Steuerdatei verbindet. Diesen Quelltext haben wir wieder weitestgehend für Sie vorbereitet und es bedarf lediglich der Anpassung des Pfades auf die Steuerdatei. Laden Sie sich diese passende Variante (mit oder ohne rechtes Seitenelement) herunter und öffnen Sie diese anschließend in einem Texteditor. Markieren Sie den kompletten Quelltext (STRTG+A) und kopieren (STRG+C) ihn anschließend n die Zwischenablage.

6. Bearbeiten der HTML-Seite
Rufen Sie nun die Datei im Bearbeitungsmodus auf, in der das Kartenmaterial dargestellt werden soll. Wechseln Sie mit Hilfe der Schaltfläche Quelltext in die Quellcode-Ansicht.

Fügen Sie nun den zuvor in die Zwischenablage kopierten Quelltext (STRG+V) in Ihre HTML-Seite ein. Als abschließende Arbeit müssen Sie nun noch den Pfad auf die Steuerdatei anpassen.

Gehen Sie hierzu in die 5. Zeile und ändern Sie den dort angegebenen (Platzhalter-)Pfad „http://www.vollstaendige-adresse.de/ihres/projektes/_configuration/googlemaps.js“ entsprechend den Erfordernissen Ihres Projektes ab. Speichern Sie anschließend Ihre Änderungen durch einen Klick auf Speichern und Schließen.

Abbildung: Abändern des Pfades auf die Ihrem Projekt zugehörige Datei "googlemaps.js"

7. Veröffentlichen
Veröffentlichen Sie nun die Dateien „googlemaps.js“ im Ordner „_configuration“ und auch die HTML-Seite die das Kartenmaterial beherbergt. Nutzen Sie wie immer die Klickfolge Kontextmenü Direkt veröffentlichen. Fortan können Ihre Leser durch eine interaktive Karte inklusive Routenplaner einfach den Weg zu Ihnen oder Ihrer Einrichtung finden!


8. Funktionskontrolle
Sie haben nun alle Arbeitsschritte hoffentlich erfolgreich durchgeführt. Ob Sie alles richtig gemacht haben, können Sie durch den Aufruf der Vorschauseite kontrollieren. Wird die Karte richtig angezeigt und verfügt auch über den Positionsmarker? Erscheint nach einem Klick auf das Markersymbol die Sprechblase mit dem von ihnen angegebenen Beschreibungstext?

Abbildung: Es hat geklappt! Die Karte mit der individuellen Positionierung wird richtig angezeigt!