Google Maps Integration

Geändert am Do, 18 Mär, 2021 um 9:23 VORMITTAGS

Inhaltsverzeichnis

  1. Einleitung
  2. Setup
    1. API-Key einrichten
    2. Google Maps aktivieren
  3. Einträge auf Karte platzieren
  4. Anzeige im Frontend
    1. Übersichtskarte
    2. Standort-Karte auf Detailansicht
  5. API

Einleitung

Das Medienverzeichnis erlaubt die Anzeige der erfassten Einträge auf einer Google Maps Karte. Jeder erfasste Eintrag wird mit einem Marker (Google Maps POI) auf der Karte dargestellt:

vd-BKEdoRidk2og1yJ4xVwPyhwnRZb5ruQ.png


Setup

Für den Einsatz von Google Maps im Medienverzeichnis muss vor der Inbetriebnahme ein Google Maps API-Key erworben werden und bei den Grundeinstellungen hinterlegt werden. Falls dies bereits gemacht wurde, kann direkt zum Schritt Google Maps aktivieren gesprungen werden.


API-Key einrichten

Für die Integration einer Google Map auf der Website wird ein API-Schlüssel (API-Key) benötigt. Informationen dazu sind in der Dokumentation von Google Maps aufzufinden.

Gehen Sie für die Einrichtung des API-Schlüssels wie folgt vor:

  1. Erwerben Sie einen API-Key für Google Maps gemäß Dokumentation

    Wichtig: Der API-Schlüssel muss Zugriff auf die APIs Maps JavaScript API und Geocoding API haben, damit die Integration im Medienverzeichnis korrekt funktioniert. Die Geocoding API wird für die Auflösung von Adressen zu Koordinaten (in der Erfassungsmaske) benötigt.


    Beispiel: API-Schlüssel Konfiguration bei Google


  2. Nachdem Sie einen API-Key für Google Maps erworben haben, öffnen Sie den Bereich Administration > Grundeinstellungen > System > Mehr in der Adminkonsole; hinterlegen Sie den API-Key bei der Option Google Maps API-Schlüssel und speichern Sie die getätigte Konfiguration:

    EKZgKLZMoI5I3NIstAEMms4NXmLbAVkgQQ.png


Google Maps aktivieren

Die Verwendung von Google Maps zur Darstellung der erfassten Einträge auf einer Karte kann pro Formular individuell aktiviert werden:

  1. Öffnen Sie den Bereich Anwendungen > Medienverzeichnis > Einstellungen > Formular Vorlagen  in der Adminkonsole
  2. Wählen Sie das gewünschte Formular aus, von welchem Sie die Einträge auf einer Google Maps Karte anzeigen lassen möchten, und öffnen Sie dieses in der Bearbeitungsmaske.
    Alternativ kann auch ein neues Formular angelegt werden.
  3. Fügen Sie ein neues Formularfeld durch Betätigung der Schaltfläche neues Feld hinzufügen hinzu:

    jvTR3itv4yFLXytgGwOSNCnYidRuRycJNw.png


  4. Geben Sie dem Feld einen Namen (Feldname) und wählen den Feldtyp Google Map aus:

    tlX7L2Kd2I5-MCGhYzJz71sJHhZCRNmv8g.png


  5. Speichern Sie die Änderung am Formular durch Betätigung der Schaltfläche Speichern


Einträge auf Karte platzieren

Erfassen oder Bearbeiten Sie nun Einträge des mit Google Maps erweiterten Formular (gemäß Schritt Google Maps aktivieren). Bei der Bearbeitungsmaske wird beim entsprechenden Google Maps-Feld folgende Eingabemaske angezeigt:

pUsbzvZHLYCpuXpJpon582x-DxtyIU0Mug.png


Die Erfassung des Standortes ist über folgende drei Arten möglich:


Adresse

Falls die Adresse des Eintrages bekannt ist, kann der Standort durch Eingabe der Felder Strasse, Ort, PLZ und Betätigung der Schaltfläche Suchen gesetzt werden.


Koordinaten

Falls die Koordinaten des Eintrages bekannt sind, kann der Standort durch Eingabe der Felder Längengrad, Breitengrad und Betätigung der ENTER-Taste gesetzt werden.


Drag&drop

Falls die genaue Adresse des Eintrages nicht bekannt ist, kann der Standort mittels drop&drop des Markers (Google Maps POI) (oder Klick an der gewünschten Stelle) auf der Karte gesetzt werden.


Hinweis: Es werden auf der Google Maps Karte nur jene Einträge angezeigt, welche einen Standard hinterlegt haben. Also als Längen- und Breitengrad nicht wie Werte 0/0 aufweisen.



Anzeige im Frontend

Im Frontend kann eine Übersichtskarte angezeigt werden, welche alle entsprechenden Einträge enthält oder eine Standort-Karte, welche nur einen ausgewählten Eintrag anzeigt. Letzteres steht nur auf der Detailansicht eines Eintrages zur Verfügung.


Übersichtskarte

Eine Übersichtskarte von ausgewählten Einträgen kann in den folgenden Bereich eingebunden werden:


Alle Einträge

Auf der spezifischen Anwendungsseite MAP (Anwendung: Medienverzeichnis / Bereich: map) kann mit dem Platzhalter [[MEDIADIR_GOOGLE_MAP]] eine Google Maps Karte angezeigt werden, welche alle Einträge aus dem Medienverzeichnis enthält.


Such-Resultate

Auf jeder Anwendungsseite des Medienverzeichnis, bei welcher die Such-Funktion eingebunden ist, kann mit dem Platzhalter [[MEDIADIR_SEARCH_GOOGLE_MAP]] eine Google Maps Karte angezeigt werden, welche die von der Suche gefundenen Einträge enthält.


Einträge einer Kategorie / Ebene

Auf jeder Anwendungsseite des Medienverzeichnis, bei welcher eine Kategorie oder Ebene ausgewählt ist, kann mit dem folgenden Block-Konstrukt eine Google Maps Karte angezeigt werden, welche die Einträge der ausgewählten Kategorie oder Ebene enthält: 

<!-- BEGIN mediadirCategoryLevelDetail -->[[MEDIADIR_CATEGORY_LEVEL_GOOGLE_MAP]]<!-- END mediadirCategoryLevelDetail -->


Standort-Karte auf Detailansicht

Die Google Maps Karte wird auf der Detailansicht über die normalen Platzhalter zur Anzeige des entsprechenden Formular-Feldes eingebunden.

Angenommen die ID des Formular-Feldes, welchem der Feldtyp Google Map zugewiesen wurde, ist 18, dann wird die Google Maps Karte auf der Detailansicht wie folgt eingebunden:

<!-- BEGIN mediadir_inputfield_181 -->[[MEDIADIR_INPUTFIELD_VALUE]]<!-- END mediadir_inputfield_181 -->


API

Map

Auf das Google Maps Objekt kann auf der Übersichtskarte wie folgt zugegriffen werden: 

var map = cx.variables.get('map_1', 'mediadirGoogleMap');

 Ist die Google Maps Karte auf der Detailansicht eines Eintrages eingebunden, so kann auf das Google Maps Objekt wie folgt zugegriffen werden: 

var map = cx.variables.get('map_FIELD-ID_ENTRY-ID', 'mediadirInputfield_FIELD-ID_ENTRY-ID_map');


Marker

Auf die Marker (Google Maps POI) der Einträge kann im Frontend via JavaScript zugegriffen werden.

Bei der Übersichtskarte kann auf die Marker wie folgt zugegriffen werden: 

var mapMarkers = cx.variables.get('map_1_markers', 'mediadirGoogleMap');

Ist die Google Maps Karte auf der Detailansicht eines Eintrages eingebunden, so kann auf die Marker wie folgt zugegriffen werden: 

var mapMarkers = cx.variables.get('map_FIELD-ID_ENTRY-ID_markers', 'mediadirInputfield_FIELD-ID_ENTRY-ID_map');

 FIELD-ID und ENTRY-ID müssen durch die Formular-Feld-Id und ID des angezeigten Eintrages ersetzt werden.


mapMarkers ist ein Objekt, welches die Marker der jeweiligen Einträge als Kind-Elemente enthält. Die Kind-Elemente werden dabei über deren Eintrags-ID identifiziert. Beispiel: 

var mapMarkers = cx.variables.get('map_1_markers', 'mediadirGoogleMap');
for (var key in mapMarkers) {
    if (!mapMarkers.hasOwnProperty(key)) {
        continue;
    }

    alert('Längengrad: ' + mapMarker.lat)
    alert('Breitengrad: ' + mapMarker.lon)
}

 

Ein Marker Objekt verfügt über die folgenden Properties:

PropertyBeschreibung
latLängengrad
lonBreitengrad
infoHTML-Code für die Anzeige der Info-Box
hideInfotrue falls die Info-Box bei der Initialisierung angezeigt werden soll. Ansonsten false
clickJavaScript-Code (als String) welcher beim click-Event auf den Marker ausgeführt werden soll
mouseoverJavaScript-Code (als String) welcher beim mouseover-Event auf den Marker ausgeführt werden soll
mouseoutJavaScript-Code (als String) welcher beim mouseout-Event auf den Marker ausgeführt werden soll

War dieser Artikel hilfreich?

Das ist großartig!

Vielen Dank für das Feedback

Leider konnten wir nicht helfen

Vielen Dank für das Feedback

Wie können wir diesen Artikel verbessern?

Wählen Sie wenigstens einen der Gründe aus
CAPTCHA-Verifikation ist erforderlich.

Feedback gesendet

Wir wissen Ihre Bemühungen zu schätzen und werden versuchen, den Artikel zu korrigieren