ERZBISTUM KÖLN  AKTUELLES  domradio

Google Maps einbinden

OpenCms bietet Ihnen seit Februar 2011 die Möglichkeit, individuell gestaltetes Kartenmaterial von Google Maps in Ihre Website einzubinden. Sie können mittels Eingabefelder beliebige Marker setzen oder mit Hilfe einer KML/KMZ-Datei ganze Tracks - beispielsweise aus einem GPS-Empfänger - in Ihre Google Maps-Karte integrieren.
Damit Sie eine Vorstellung von den Möglichkeiten bekommen, haben wir zwei Beispiele für Sie vorbereitet:
Google Map mit Adresssen-Eingabe  Google Map mit KML-Datei

1. Anlegen einer neuen Google-Maps Seite
Klicken Sie zunächst auf die Schaltfläche Neu und anschließen auf Strukturierter Inhalt Google Map. Vergeben Sie den Dateinamen, Titel, Beschreibung und Navigationstext wie gewohnt und beenden den Assistenten anschließend mit einem Klick auf Fertig stellen. In Ihrem OpenCms Arbeitsplatz sollte sich nun eine neue Datei vom Typ "Google Map" befinden.
Das OpenCMS-Modul Google-Map im Einsatz
Abb: Das OpenCMS-Modul "Google-Map" im Einsatz



2. Wechsel in den Bearbeitungsmodus
Um Ihre neu erstellte Datei vom Typ "Google Map" nun mit individuellen Einstellungen zu versehen, müssen Sie zunächst in den Bearbeitungsmodus wechseln.
Aus technischen Gründen verfügt eine Datei vom Typ "Google Map" nicht wie gewohnt über eine DirectEdit-Schaltfläche. Sie können demnach nur über das Kontextmenü und "Seite bearbeiten" in den Bearbeitungsmodus wechseln.
Nachdem Sie in den Bearbeitungsmodus gewechselt sind, befinden Sie sich standardmäßig auf dem Register "Einstellungen". Auf dieser Registerkarte können Sie nun alle wesentlichen Eigenschaften die das Aussehen und die eingeblendeten Features betreffen einstellen.

Die Google-Map-Datei im Bearbeitungsmodus. Hier das Register Einstellungen
Abb: Die Google-Map-Datei im Bearbeitungsmodus. Hier das Register "Einstellungen"
Die Parameter im Überblick:

a. Überschrift:
Die Seitenüberschrift der Goole-Map Seite im oberen Bereich der Internetseite

b. Text:
In diesem großen Eingabefeld können Sie den die benötigten Texte eingeben. Hierzu steht Ihnen der normale Editor mit all seinen Farmatierungsmöglichkeiten zur Verfügung. Es können Bilder und Links nach Belieben eingefügt werden. Die Steuerung wo der Text angezeigt wird mit dem Paratmeter "Textausrichtung" (siehe c.) beeinflusst.

c. Textausrichtung:

Mit Hilfe der Textausrichtung beeinflussen Sie die Position des im oberen Eingabefeld vergebenen Textes. Es stehen die Positionen "Text oben", "Text unten", "Text links" und "Text rechts" zur Auswahl.

d. Kartengröße:
Mit dieser Kombo-Box können Sie die Größe der Karte Ihren Anforderungen entsprechend anpassen. Die Größe kann in Pixel- oder Prozentangaben vergeben werden. Sie finden hierzu bereits eine Auswahl gängiger Größen vor, es können aber auch individuelle Größen in Form von Breite x Höhe eingegeben werden.
Prozentangaben agieren dynamisch: So sorgt die Eingabe von "100%" stets dafür, dass die Karte die volle Breite des Inhaltsbereichs einnimmt. Dies ist besonders dann von Vorteil, wenn man beispielsweise zu einem späteren Zeitpunkt ein rechtes Seitenelement einbindet, durch den der Inhaltsbereich automatisch um 180 Pixel schmaler wird.

e. Kartentyp:
Mit dieser Selectbox können Sie den Kartentyp Ihrer Google-Map einstellen. Zur Auswahl stehen "Straßenkarte", "Satellit" und Hybrid.

f. Zoom:
Der hier eingebene Wert bestimmt die Zoom-Stufe des Kartenausschnitts. Zur Auswahl stehen die Werte 1-20, wobei 20 die größte Zoomstufe darstellt. Ein guter Mittelwert liegt bei etwa 10-12.

g. Routenplaner:
Ist dieses Häkchen gesetzt, wird zu jedem der gesetzten Koordinaten-Marker ein Routenplaner (Route hierhin anzeigen) eingeblendet. Auf diese Art und Weise können Sie Ihren Lesern individuell die Möglichkeit bieten, sich die Anfahrt online berechnen zu lassen.

Nachdem Sie alle benötigten bzw. gewünschten Parameter auf der Registerkart "Einstellungen" eingetragen haben, wechseln Sie mit einem Mausklick auf die Registerkarte "Koordinaten". Mit Hilfe der hier von OpenCMS zur Verfügung gestellten Eingabefelder können Sie nun individuell die Marker auf Ihrer neuen Google-Maps-Karte setzen.



3. Die Registerkarte "Koordinaten"
Auf dieser Registerkarte stellt Ihnen OpenCMS Eingabefelder zum erstellen Ihrer individuellen Marker bereit. Die Anzahl der Marker ist beliebig und passt sich somit Ihrem Bedarf an. Alternativ können Sie auch eine in Google-Earth bearbeitete KML-Datei einbinden. Dies ist beispielsweise dann interessant, wenn Sie eine Strecke (beispielweise einen Pilgerweg etc.) mit Sehenswürdigkeiten auf Ihrer Karte darstellen wollen.

Wir beschreiben Ihnen nun beide Vorgehensweisen.
Die Google-Map-Datei im Bearbeitungsmodus. Hier das Register Koordinaten
Abb: Die Google-Map-Datei im Bearbeitungsmodus. Hier das Register "Koordinaten"



4. Manuell gesetzte Koordinaten
Dies ist die einfachste Form um eine beliebige Anzahl von Marker mit POIs auf Ihrer Karte darzustellen. Standardmäßig verfügt eine neu erstellte Google-Map nur über einen einzelnen Koordinatenpunkt. Durch einen Klick auf die entsprechende DirectEdit-Schaltfläche am rechten Bildschirmrand können Sie weitere Koordinatenpunkte definieren. Möchten Sie beispielsweise als Gemeinde oder Einrichtung alle fünf im Stadtgebiet verteilten Gebäude mit je einem Koordinaten-Marker ausstatten, so müssen Sie zunächst die benötigte Anzahl von Koordinaten-Punkten durch Klicks auf die zuständigen DirectEdit-Schaltflächen aktivieren.
Manuelle Eingabe der Koordinaten für einen Markerpunkt.
Abb: Manuelle Eingabe der Koordinaten für einen Markerpunkt.



5. Einen Koordinaten-Punkt eingeben / feinjustieren
Für jeden Koordinaten-Punkt müssen Sie die Beschriftung, die Adresse und die eigentlichen Koordinaten in Form der regulären Adresse eingeben. Die Google-Server versuchen aus dieser Adressangabe die genauen Koordinaten des Markers automatisch zu ermitteln. Dies funktioniert sehr zuverlässig für Örtlichkeiten, die über eine postalische Anschrift verfügen (Straße, Hausnummer, PLZ, Ort).

Bei Örtlichkeiten, denen keine postalischen Adresse zuzuordnen ist, wie z.B. Kapellen, Kirchen, Wegkreuze, Denkmäler etc. wählen die Google-Server die nächstmögliche Straße und und Hausnummer. Da dies oft viel zu ungenau ist, können Sie den Marker im Anschluss feinjustieren.

Klicken Sie hierzu auf den kleinen Pfeil an der rechten Seite des Koordinaten-Eingabefeldes. In einem PopUp-Fenster bekommen Sie den den aktuellen Standort angezeigt. Klicken Sie nun auf den roten Marker und halten die Maustaste geklickt. Verziehen Sie nun den Marker an die von Ihnen gewünschte Stelle. Bestätigen Sie anschließend mit OK.
Der Assistent blendet unter Umständen eine nicht zum Objekt passende Adresse im Eingabefeld "Koordinaten" bzw. "Koordinaten" ein. Bitte ignorieren Sie diese Eingabe und klicken Sie vor allem nicht erneut in dieses Eingabefeld, beispielsweise um die zu löschen oder zu editieren. Hierdurch würde die manuell von Ihnen gesetzte Position des Marker wieder geändert.
In dem PopUp-Fenster können Sie den Marker durch ziehen mit der linken Maustaste an die gewünschte Position ziehen
Abb: In dem PopUp-Fenster können Sie den Marker durch ziehen mit der linken Maustaste an die gewünschte Position ziehen.



6. Koordinaten-Punkte mit einer KML/KMZ-Datei
Wenn sie eine große Anzahl an Koordinaten-Punkten verwalten müssen, oder eine Strecke mit Sehenswürdigkeiten (Wanderung, Rundgang durch die Gemeinde) in Ihr Kartenmaterial einbinden möchten, so gibt es fast keine andere Möglichkeit als dies mit Hilfe einer in Google-Earth erstellten KML/KMZ-Datei zu tun.

Eine detaillierte Beschreibung zur Erstellung von KML-Dateien kann in diesem Tutorial nicht gegeben werden. Allerdings bietet das Internet zum Thema "Google Maps / Google Earth und KML" reichlich Informationen. Einen übersichtlichen Einstieg in die Thematik finden Sie in den Dokumentationen zu Google Earth. "Google Earth - Nutzerhandbuch" sowie "Google Earth Doku".
Zum experimentieren haben wir Ihnen eine KML-Datei bereitgestellt. Laden Sie sich diese Datei herunter und spielen sie anschließend in Ihr OpenCMS-Projekt ein.
Download KML-Datei "Rundgang um den Kölner Dom"
Die KML-Datei wurde hochgeladen und liegt in einem Verzeichnis des OpenCMS-Projektes\n\n
Abb: Das OpenCMS-Modul "Google-Map" unter Verwendung einer mit Google-Earth erstellten KML-Datei



7. KML/KMZ-Datei hochladen
Damit die von Ihnen im Vorfeld erstellte KML/KMZ-Datei in Ihrer Google-Map angezeigt werden kann, muss diese zuvor auf den OpenCMS-Server hochgeladen werden, damit es im Anschluss für die Google-Server öffentlich abrufbar ist.
Das Thema "Hochladen von Dateien" wurde detalliert im Handbuch "Der Workplace" im Kapitel "Neue Dateien hochladen" beschrieben
Die KML-Datei wurde hochgeladen und liegt in einem Verzeichnis des OpenCMS-Projektes
Abb: Die KML-Datei wurde hochgeladen und liegt in einem Verzeichnis des OpenCMS-Projektes



8. Einbinden einer lokal gespeicherten KML/KMZ-Datei
Rufen Sie zunächst Ihre Google-Maps-Datei im Bearbeitungsmodus auf und wechseln anschließend auf das Register "Koordinaten". Um hier eine KML/KMZ-Datei einbinden zu können, müssen Sie zuerst das dafür zuständige Eingabefeld mit Hilfe der DirectEdit-Schaltfläche aktivieren.

Mit Hilfe der Schaltfläche "Suche" am Ende des Eingabefeldes können Sie nun die KML/KMZ-Datei im Dateisystem Ihres Projektes auswählen. Hat alles geklappt, so sollten Sie im Eingabefeld den Dateipfad zu der KML/KMZ-Datei vorfinden.
Wird eine KML-Datei verwendet, werden die manuell eingegebenen Koordinaten ignoriert und demnach nicht angezeigt!
Das aktivierte Eingebfeld KML-Datei mit dem Dateipfad zur KML/KMZ-Datei
Abb: Das aktivierte Eingebfeld "KML-Datei" mit dem Dateipfad zur KML/KMZ-Datei
 

 
8a. Einbinden einer externen KML/KMZ-Datei
Nicht immer ist  es möglich die KML/KMZ-Datei auf dem openCMS-Server zu speichern. Deshalb gibt es die Möglichkeit, eine extern gespeicherte KML/KMZ-Datei im Eingabefeld "KML-Datei" einzutragen. Diese kann von Google-Maps selber, aber auch einem beliebigen andren Server geladen werden. Hier einige Beispiele:

1. Google-Maps
http://maps.google.de/maps?q=domkloster+4,+köln&aq=&sll=50.883191,7.060368&output=kml

2. GPSies.com
http://www.gpsies.com/download.do?fileId=tkixajjkotdwyhlj&filetype=kml

3. Jeder andere per HTTP erreichbare Server:
http://www.name.de/unterverzeichnis/name-der-datei.kml

Um eine in Google-Maps erstellte Strecke in OpenCms anzuzeigen, müssen Sie lediglich die URL Ihrer Google-Maps-Karte um den Eintrag "&output=kml" erweitern (siehe oben). Dadurch wird die Strecke nicht in der Google-Karte angezeigt, stattdessen liefern die Google-Server die passende KML-Datei aus. Gleiches gilt für den Kartendienst GPSies.com. Auch hierreicht einer Erweiterung der URL aus, um eine KML-Datei zu bekommen.
Das aktivierte Eingebfeld KML-Datei mit dem Dateipfad zur KML/KMZ-Datei
Abb:Auch externe KML/KMZ-Dateien können im openCMS Google Map Modul eingetragen werden
 

 
9. Speichern und überprüfen der Angaben
Nachdem Sie alle Parameter in die Eingabefelder eingegeben haben, können Sie Ihre Google-Map-Datei speichern und in der Vorsch auf korrekte Darstellung überprüfen.
Die Vorschaufunktion von Google-Map-Dateien funktioniert im Projekt "Offline" nicht bei der Verwendung von KML/KMZ-Dateien! Um die endgültige Ansicht der Karte auf dem Monitor angezeigt zu bekommen, müssen die Google-Map-Datei und die dazugehörige KML/KMZ-Datei veröffentlicht sein.

Die KML-Datei wurde hochgeladen und liegt in einem Verzeichnis des OpenCMS-Projektes\n\n
Abb: Die Google-Map mit (hier mit einer KML-Datei als Datengrundlage) in der Ansicht wie sie auch Ihre Leser später zu sehen bekommen.


Zum Seitenanfang Seite weiterempfehlen Druckversion Kontakt  Barrierefrei Datenschutz  Impressum