Integrating Google Maps

Follow these steps to show a Google Maps map on your website.

You can also show a privacy-compliant Google Maps map. Users first see a notice that Google Maps is used and have to confirm with a click that the map may be shown. This prevents data transfer to Google if users don’t consent.

1 / Install the Google Maps extension:

To install the extension, follow these steps:

Open the Contao Manager and log in
Select Install packages
Enter “dlh_googlemaps” in the search field
Click Add package on the extension delahaye/dlh_googlemaps and then Apply changes
Open the install tool and update the database

2 / Enter the API key in the site structure

In the site structure, enter the Google Maps API key in the website root of your site. You find the setting in the Google Maps tab. All information on creating the API key is on the Google Maps APIs website.

3 / Create a Google Maps map:

After a successful installation you should see a new menu item Google Maps under Content in the left menu. Click it and create a new map with the button “New Google Map”. You only need to enter a title; you can keep all other settings or change them as you like. Address and geo coordinates are set automatically by the real estate module.

4 / Create a module:

Then click Themes under Layout in the left menu. Click the gear icon to edit the front end modules of the theme. Now create a new module.

Give your module a meaningful title. Select Google Map as the module type. You can also use the search in the select field. In the map data tab, select the map you just created.

In the template settings tab, select the template mod_dlh_googlemaps_default_mm.

Privacy notice:

A checkbox enables or disables the privacy notice, so that data is only sent to Google once the user explicitly consents. If you leave the privacy notice field empty, the default text of the module is used. Alternatively, you can enter your own text or use our example below.

If you paste the following code in the source code view (icon <>), the privacy notice is shown on your website as in the image below.

<h3>This website uses Google Maps</h3>
<p>Click here to activate it permanently. I agree that data will be transferred to Google when using it. Note: You can revoke your consent at any time for the future by deleting the cookie dlh_googlemaps. You find detailed information on how we handle user data in our privacy policy.</p>
<p><a class="btn" href="#">Activate Google Maps</a></p>

5 / Adjusting the real estate module template

Select Templates under Layout in the left menu and edit your detail view template (makler_details_extended or makler_details_simple). If the template is not in this folder yet, create it with the button “New template”.

In the template, add the following code snippet where the map should be shown. Replace ID with the ID of the module you created (you see it at the very top when editing the module).

{{insert_module::ID}}

If the map should only be shown when the address is actually released, put the code snippet inside the following if statement.

Example of including the Google Maps map:

<?php if($this->estate->renderer('verwaltung_objekt.objektadresse_freigeben')->asText()->value(true) == true && $this->showMap == 1): ?>
    <h3>Karte</h3>
    <div class="address">
        <h4>Objektanschrift</h4>
        <?php $this->estate->renderer('geo.strasse')->asText()->value() ?> <?php $this->estate->renderer('geo.hausnummer')->asText()->value() ?><br />
        <?php $this->estate->renderer('geo.plz')->asText()->value() ?> <?php $this->estate->renderer('geo.ort')->asText()->value() ?>
    </div>

    {{insert_module::48}}

    <script>
        $(document).ready( function() {
            $("#confirm-googlemaps").click( function() {
                setMap();
            });

            $("#confirm-googlemaps .btn").click( function() {
                $("#confirm-googlemaps").trigger("click");
                return false;
            });

            var mapsCookie = "<?= \Input::cookie('dlh_googlemaps') ?>";
            if(mapsCookie != "" || $(".dlh_googlemap > div").attr("id") != "confirm-googlemaps") {
                setMap();
            }

            function setMap() {
                setTimeout( function() {
                    var geocoder = new google.maps.Geocoder();
                    var lat; var lng;
                    geocodeAddress(geocoder);
                },500);
            }

            function geocodeAddress(geocoder, resultsMap) {
                var address = "<?php $this->estate->renderer('geo.strasse')->asText()->value() ?>";
                address = address + " <?php $this->estate->renderer('geo.hausnummer')->asText()->value() ?>";
                address = address + ", <?php $this->estate->renderer('geo.ort')->asText()->value() ?>";
                geocoder.geocode({'address': address}, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        lat = results[0].geometry.location.lat();
                        lng = results[0].geometry.location.lng();
                        setCenter(lat, lng);
                        setMarker(lat, lng);
                    }
                });
            }

            function setCenter(lat, lng) {
                gmap1.setCenter(new google.maps.LatLng(lat, lng));
            }

            function setMarker(lat, lng) {
                var gmap1_marker = new google.maps.Marker({
                    position: new google.maps.LatLng(lat, lng),
                    map: gmap1,
                    zIndex: 1
                });
            }
        });
    </script>
<?php endif; ?>

Optional: CSS adjustments

To make CSS adjustments, edit your CSS file. If you don’t have one yet, create a CSS file, e.g. style.css, and select it in the page layout under external stylesheets.

Code snippets

Below are some code snippets that show how to adjust colors, widths and heights.

Change the height of the Google Maps map:

.mod_dlh_googlemaps, .dlh_googlemap {
    height: 600px;
}

Change the privacy notice:

#confirm-googlemaps {
    background: #fff;
    color: #000;
    width: 50%;
}

Change the h3 headline:

#confirm-googlemaps h3 {
    background: #f2f2f2;
    color: #b91e1e;
}

Change the button:

#confirm-googlemaps a.btn {
    background: #d45a5a;
    color: #fff;
}

Change the button hover:

#confirm-googlemaps a.btn:hover {
    background: #b91e1e;
    color: #fff;
}