Google maps

API-Key

Der API-Key benötigt Zugriff auf:

  • Google Maps Geocoding API (Convert between addresses and geographic coordinates.)

Der API-Key muss für das Frontend via TypoScript-Konstante bereitgestellt werden und für das Backend via Extensionmanager-Konfiguration.

Libraries

Wenn der AutoCompleter verwendet werden soll, muss die places Library via TypoScript-Konstante angegeben werden.

Notice:

Wenn die Umkreissuche verwendet wird, wird immer nach Distanz sortiert!

Map-Marker

Die Map-Marker können via TypoScript wie folgt konfiguriert werden:

plugin.tx_addressmanager {
    settings {
        list {
            map {
                marker {
                    width = 32
                    height = 32
                    style {
                        default (
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#f00" d="M12 0c-4.198 0-8 3.403-8 7.602 0 6.243 6.377 6.903 8 16.398 1.623-9.495 8-10.155 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.342-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
                        )
                        green (
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#f00" d="M12 0c-4.198 0-8 3.403-8 7.602 0 6.243 6.377 6.903 8 16.398 1.623-9.495 8-10.155 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.342-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
                        )
                    }
                }
            }
        }
        detail {
            map {
                marker {
                    width = 32
                    height = 32
                    style {
                        default (
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#f00" d="M12 0c-4.198 0-8 3.403-8 7.602 0 6.243 6.377 6.903 8 16.398 1.623-9.495 8-10.155 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.342-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
                        )
                        green (
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#f00" d="M12 0c-4.198 0-8 3.403-8 7.602 0 6.243 6.377 6.903 8 16.398 1.623-9.495 8-10.155 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.342-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
                        )
                    }
                }
            }
        }
    }
}

Die width und height wird in Pixeln angegeben. Die Spitze des Markers muss unten ausgerichtet in der Mitte liegen. Im style Knoten können beliebig viele unterschiedliche Pins definiert werden. Hierbei wird einfach der Inhalt eines SVGs in dem value platziert. Der Eintrag default sollte am besten immer definiert sein, da dies der Fallback ist.

Diese Einträge müssen dann im Backend via Page-TypoScript definiert werden, so dass diese auswählbar sind:

TCEFORM {
    tx_addressmanager_domain_model_address {
        # Define some new marker
        map_marker.addItems {
            bad = Bad
            haus = Haus
            parken = Parken
            radstation = Radstation
            thermal = Thermal
        }
        map_marker.removeItems = pinThin
    }
}

Die Entfernung in Suchergebnis-Einträgen anzeigen

Wenn Sie die Entfernung in den Suchergebnis-Eintägen anzeigen möchten, können Sie das folgende Code-Schnipsel verwenden. Aber stellen Sie sicher das Sie die Ausgabe in eine entsprechende Anfrage setzen, weil address.distance unter Umständen nicht gesetzt ist, wenn eine Adresse angegeben ist!

<f:if condition="{address.distance}">
    <f:format.number decimals="2">{address.distance}</f:format.number> KM
</f:if>

Ermittlung des Besucher-Standorts

Die AddressManager Erweiterung kann mit einem Button-Klick den Standort des Besuchers abrufen und dann die Location-Suche abschicken. Dafür müssen Sie lediglich einen Button wie folgt einbinden:

<div id="get-location-button">Get location</div>

Google-Map nur initialisieren, wenn erlaubt wurde

Als erstes müssen wir die Google Bibliotheken aus dem TypoScript entfernen, damit diese nicht geladen werden. Das soll aber nur passieren, wenn der Besucher das Laden der Google-Maps noch nicht erlaubt hat.

[globalVar = _COOKIE|googleMapsAllowed = 1]
    # The visitor has allowed loading google maps!
[else]
    # The visitor needs to decide if he wants load google maps
    page.includeJSFooterlibs.googleMaps >
    page.includeJSFooterlibs.googleMapsHtmlMarker >
    page.includeJSFooterlibs.googleMapsClustering >
[global]

Als nächstes brauchen wir ein kleines JavaScript, welches prüft ob eigentlich eine Google-Map hätte angezeigt werden sollen.

var Cookies = {
    set: function(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    },
    get: function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }
};

jQuery(document).ready(function() {
    // Google map
    var googleMapsAllowed = Cookies.get('googleMapsAllowed');
    if(googleMapsAllowed === null) {
        let mapWrapperAddress = jQuery('.address-detail-map-wrapper');
        if(mapWrapperAddress.length > 0) {
            let styles = 'height: 200px; width: 100%; background-color: gray;';
            let classes = 'map-placeholder d-flex flex-wrap justify-content-center align-items-center';
            let button = '<button class="btn btn-primary btn-load-map" onclick="activateGoogleMaps();">Google-Maps immer nachladen!</button>';
            mapWrapperAddress.html('<div class="' + classes + '" style="' + styles + '">' + button + '</div>');
        }
    }
});

function activateGoogleMaps() {
    Cookies.set('googleMapsAllowed', '1', 365);
    window.location.reload(false);
}