ZURÜCK ZUR GESAMTÜBERSICHT | DOKUMENTATIONEN | SCHRITT FÜR SCHRITT | WEITERE THEMEN

Google-Maps in OpenCms einbinden

Der Suchmaschinenanbieter Google bietet einen kostenlosen Dienst an, mit dessen Hilfe Sie lokalisiertes Kartenmaterial in Ihre Website einbinden können. Wie dies funktioniert zeigt das folgende Manual.

1. Kartenmaterial lokalisieren
Rufen Sie in einem neuen Browserfenster die URL http://maps.google.de auf und geben in das Eingabefeld im oberen Bereich der Seite die gewünschte Lokalität in Form von Ort, Straße und Hausnummer durch Kommata getrennt ein. Klicken anschließend auf „Maps Suche“. Der Webdienst „zoomt“ sich daraufhin an den von Ihnen vorgegebenen Ort heran.

Sollte der Kartenausschnitt Ihren Wünschen entsprechen, können Sie sich durch einen Klick auf den am rechten Bildschirmrand positionierten Link „URL zu dieser Seite“ den Quelltext generieren lassen.

Ein Klick auf diesen Link öffnet ein Menü in dessen unterem Bereich sich der „HTML-Code zum Einbetten in eine Website“ befindet. Klicken Sie in das darunter liegende Eingabefeld und kopieren den Inhalt in die Zwischenablage, um es später in eine Ihrer OpenCms-Seiten einzubinden.

2. Individualisieren des Kartenlayouts

Die Kartendarstellung sollte sich an den geografischen Gegebenheiten vor Ort orientieren. In den meisten Anwendungsfällen ist eine vergrößerte Kartenansicht zweckmäßig. Die Vergrößerung sollte die wichtigsten Straßennamen einblenden:

Vergrößert auf 200 m bei Adresse im städtischen Bereich.
Vergrößert auf 500 m bei Adresse im ländlichen Bereich.

Grundsätzlich sollten Sie die möglichen Kartenansichten von „Google Maps“ vergleichen um eine optimale Ansicht zu erhalten: Karten, Satellit, Gelände.

Wählen Sie unter der folgenden Fragestellung die beste Lösung:

Bietet die Karten-, Satelliten- oder Geländeansicht mehr Orientierung an? (Straßennamen, notwendige Einbahnstraßen zur Anfahrt, spezifisches Gelände, markante Bauwerke etc.)

Die Größe der Karte sollten Sie den örtlichen Gegebenheiten und dem verfügbaren Platz auf Ihrer Internetseite anpasst werden.

Folgende Überlegungen helfen Ihnen, die richtige Kartengröße Ihrer Internetseite zu ermitteln:

Wie viel Informationen muss die Karte auf dem ersten Blick darstellen um eine ausreichenden anzubieten Orientierung? (Großraum, Stadtteil, Stadtteilviertel etc.)
Benötigt die Satellitenansicht auch die Einblendung der Hauptverkehrsstraßen?
Wie viel Straßenzüge und Namen müssen zu lesen sein?
Gibt es markante Orientierungspunkte, die die Karte darstellen sollte?
(Autobahnkreuz, Kirche, Fluss, Brücke etc.
Wie viel Platz bietet das Template meiner Internetseite, gemessen in dem Maß „Pixel“.

Im „OpenCms-TemplateOne“ sollte die Karte im Inhaltsbereich eingebunden werden. Berücksichtigt werden muss hierbei die absolute Breite des Inhaltsbereiches, der durch die Einbindung des rechten Seitenelementes variieren kann.
Folgende Abmessungen müssen deshalb berücksichtigt werden: Ohne rechtes Seitenelement: 690Pixel, mit rechtem Seitenelement: 490Pixel

Die Größe des Kartenausschnitts lässt sich in Google-Maps individuell an Ihre Erfordernisse anpassen. Klicken Sie hierzu in der rechten oberen Ecke auf den Link „Link“ und anschließend in dem Untermenü auf den Link “Eingebettete Karte anpassen und Vorschau anzeigen”. In dem daraufhin erscheinenden PopUp-Fenster können Sie die Parameter der Karte nun individuell anpassen. Der Quelltext im unteren Bereich des PopUp-Fensters aktualisiert sich nach jeder durchgeführten Änderung automatisch.

Um die Größe des Kartenausschnitts einzustellen, wählen Sie zunächst unter "Kartengröße" auf den Auswahlpunkt „Benutzerdefiniert“ aus. In den nun aktivierten Eingabefeldern "Breite" und "Höhe" können Sie nun die gewünschten Werter eintragen. Eine für den Inhaltsbereich (ohne rechtes Seitenelement) passende Größe wäre z.B. 600 x 450 Pixel (h x b).

3. Vorschau und Überprüfung der Einstellungen
Sie können das Ergebnis direkt in der Vorschau im unteren Bereich des PopUp-Fensters begutachten. Dies entspricht genau der Größe mit der die Karte später auch in Ihrem Dokument eingebunden wird. Sie können Ihre Ansicht noch dahingehend optimieren, in dem Sie die dargestellte Position auf den Mittelpunkt der Karte zentrieren (Doppelklick zoomt die Karte auf einen Mittelwert und Positioniert den Klickpunkt mittig in dem Kartenausschnitt) oder die Zoomstufe mit Hilfe der Regler im rechten oberen Bereich der Karte Ihren Erfordernissen anpassen.

4. Kopieren des HTML-Codes
Sind alle Einstellungen gemacht, können Sie nun den HTML-Code (auch Quelltext genannt) in Ihre Internetseite einfügen. Hierzu müssen Sie im PopUp-Fenster den Quelltext markieren, kopieren und dann in Ihre OpenCms-Seite einfügen.

Im Folgenden werden Ihnen die Schritte erklärt:
Klicken Sie mit der Maus das Eingabefeld in dem der HTML-Code eingeblendet wird und drücken anschließend auf der Tastatur gleichzeitig die Tasten Strg + A, oder wählen Sie alternativ „Alles auswählen“ im Windows-Kontextmenü aus. Der gesamte Quelltext ist daraufhin blau markiert. Drücken Sie auf der Tastatur gleichzeitig die Tasten Strg + C, oder wählen Sie alternativ „Kopieren“ im Windows-Kontextmenü aus um den Quelltext in die Zwischenablage zu kopieren.

5. Kartenmaterial in eine Webseite einbinden
Rufen Sie nun in OpenCms die Webseite auf, in der das Kartenmaterial eingebunden werden soll und wechseln anschließend mit einem Klick auf die DirectEdit-Schaltfläche in den Bearbeitungsmodus. Mit einem weiteren Klick auf die Schaltfläche „Quellcode“ in der Editor-Symbolleiste wechseln Sie dann in den Quelltextmodus und können nun den zuvor in die Zwischenablage kopierten Quelltext in Ihre Website einfügen.

Der Quelltext einer Website ist für viele Leute nichts anderes als eine große Ansammlung unübersichtlich angeordneter Buchstaben, Worte und Befehle. Oft stellt sich die Frage: An welcher Stelle muss ich den Quelltext denn nun einfügen?!

Deshalb an dieser Stelle ein kleiner Trick der die Handhabung deutlich vereinfacht:
Wechseln Sie wie gewohnt in den Bearbeitungsmodus und fügen an der Stelle, an der später der über den Quelltext eingefügte Inhalt positioniert sein soll ein beliebiges Platzhalterwort (z.B.: Quelltext) ein. Wechseln Sie nun in den Quelltextmodus und rufen anschließend mit der Tastenkombination STRG+F die lokale Suchfunktion des Browsers auf. Geben Sie dort das zuvor vergebene Platzhalterwort ein und bestätigen mit „Weiter“.
Sie werden daraufhin genau an der gesuchten Stelle innerhalb des Quelltextes landen und können das Platzhalterwort durch den in die Zwischenablage kopierten Inhalt ersetzen.

Barrierefrei Datenschutz Impressum