Google maps

API Key

The API key requires access to:

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

The API key must be made available in the frontend via a TypoScript constant and in the backend via the extension manager configuration.

Libraries

If the the AutoCompleter is used, the places library must be specified via a TypoScript constant.

Notice:

The radial search function sorts by distance!

Map Markers

Map markers can be configured in TypoScript as follows:

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>
                        )
                    }
                }
            }
        }
    }
}

The width and height are given in pixels. The tip of the marker must be centered at the bottom. Any number of different pins can be defined in the style node. Simply place the content of the SVG in the value. A default entry should be defined as a fallback.

These entries must then be defined in the backend via Page TypoScript so that they can be selected:

TCEFORM {
    tx_addressmanager_domain_model_address {
        # Define a new marker
        map_marker.addItems {
            bath = Bath
            house = House
            parking = Parking
            bicyclestation = BicycleStation
            thermal = Thermal
        }
        map_marker.removeItems = pinThin
    }
}

Showing distances in search results

To show distances in search results, use the following code snippet. However, wrap the variable in an if condition, because address.distance is only set if a search location is given!

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

Determining visitor location

The AddressManager extension can retrieve the visitor's location and start a location search with one button click. Just add a button as follows:

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

Initialize Google Maps only with visitor consent

Firstly, we need to remove the Google libraries from TypoScript so that they are not loaded. However, this is only if the visitor has not consented to Google Maps being loaded.

[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]

Then we need some JavaScript which checks whether Google Maps should be displayed.

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);
}