Integrating Google Maps

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

Property inquiry form

Including a simple property inquiry form

Create a new form named “Objektanfrage” (property inquiry) with the form generator. Add the fields and descriptions you need, and don’t forget a field for the property number, ideally as a hidden field.

Passing the property number

With a little JavaScript we can pass the property number to the input field. You can add the script, for example, to the detail view template (makler_details_simple or makler_details_extended).

Passing the property number to the input field with the ID “ctrl_17” with jQuery

<script>
if(typeof jQuery('.verwaltung-techn-objektnr-extern') != 'undefined')
  jQuery('#ctrl_17').val(jQuery('.verwaltung-techn-objektnr-extern .value-text').html());
</script>

Passing the property number to the input field with the ID “ctrl_17” with MooTools

<script>
if(typeof $('.verwaltung-techn-objektnr-extern') != 'undefined')
    $('#ctrl_17').set('value', $('.verwaltung-techn-objektnr-extern .value-text')[0].get('text'));
</script>

This is what the finished form can look like

Form with OpenImmo feedback XML

Form with OpenImmo feedback XML

This guide shows how to set up a property inquiry form with OpenImmo feedback XML in Contao 4 using the real estate module and the Notification Center. The goal is that property inquiries do not simply land in the inbox of the real estate software, but are shown under “Objektanfragen” (property inquiries).

The following steps assume that, in addition to the real estate module, the Notification Center is installed and the property list and the exposé are set up.

Create the property inquiry form

To set up the property inquiry form, create a new form in the form generator and name it, for example, “Anfrage Objekt”. You should also select a redirect page to which visitors are sent after submitting the form. We will create the notification later, so leave this field empty for now.

Create the form fields

Now create the fields in the form.

For the property number you can create a normal text field or a hidden field. The field name must be oobj_id.

The field names of the other fields must be exactly as in the following screenshot or the XML example after it. You don’t have to create all fields that appear in the XML example, though.

XML example:

<openimmo_feedback>
	<sender>
		<name/>
		<openimmo_anid/>
		<datum>01.01.2010</datum>
		<makler_id>12345</makler_id>
	</sender>
	<objekt>
		<portal_unique_id/>
		<portal_obj_id/>
		<anbieter_id/>
		<oobj_id>Objektnummer</oobj_id>
		<zusatz_refnr/>
		<expose_url>http:www.domain.de/expose?ID=12345</expose_url>
		<vermarktungsart>Kauf</vermarktungsart>
		<bezeichnung>Kurzbeschreibung</bezeichnung>
		<etage/>
		<whg_nr/>
		<strasse>Objekt_Strasse</strasse>
		<ort>Objekt_Ort</ort>
		<preis>Objektpreis</preis>
		<gebot/>
		<wae/>
		<interessent>
			<int_id/>
			<anrede>Herr</anrede>
			<vorname>Vorname_Interessent</vorname>
			<nachname>Nachname_Interessent</nachname>
			<firma>Firma_Interessent</firma>
			<strasse>Strasse_Interessent</strasse>
			<postfach/>
			<plz>PLZ</plz>
			<ort>Ort_Interessent</ort>
			<tel>01234/1234567</tel>
			<fax>01224/6545223</fax>
			<mobil/>
			<email>email@domain.de</email>
			<bevorzugt>EMAIL, POST oder FAX</bevorzugt>
			<wunsch>BESICHTIGUNG oder RÜCKRUF</wunsch>
			<anfrage>Anfrage-Text </anfrage>
		</interessent>
	</objekt>
</openimmo_feedback>

Place the form and fill in the property number

You can then add the form to the article of the exposé by selecting the element type Form and the corresponding form.

To make sure the form field for the property number gets the right value, we need a small piece of jQuery code. You can put the following code, for example, in a separate JavaScript file or add it in the layout under Custom JavaScript code.

<script>
jQuery(document).ready(function($) {
	if(typeof $('.verwaltung_techn-objektnr_extern') != 'undefined') {
		$('input[name="oobj_id"]').val( $('.verwaltung_techn-objektnr_extern .value-text').html() );
	}
});
</script>

This is what the finished property inquiry form could look like:

Create the OpenImmo feedback XML

Next, create a file named openimmo_feedback.xml in the file manager. It must look like the following example.

<?xml version="1.0" encoding="ISO-8859-1"?>
<openimmo_feedback>    
	<sender>        
		<name>Ihre Makler 24</name>        
		<datum>16.03.2020</datum>        
		<makler_id>5038545</makler_id>    
	</sender>    
	<objekt>        
		<oobj_id>##form_oobj_id##</oobj_id>        
		<interessent>            
			<anrede>##form_anrede##</anrede>            
			<vorname>##form_vorname##</vorname>            
			<nachname>##form_nachname##</nachname>            
			<strasse>##form_strasse##</strasse>            
			<plz>##form_plz##</plz>            
			<ort>##form_ort##</ort>            
			<tel>##form_tel##</tel>            
			<fax>##form_fax##</fax>            
			<email>##form_email##</email>            
			<bevorzugt>##form_bevorzugt##</bevorzugt>            
			<wunsch>##form_wunsch##</wunsch>            
			<anfrage>##form_anfrage##</anfrage>        
		</interessent>    
	</objekt>
</openimmo_feedback>

Create the notification

Create a notification:

For the form to be sent, create a new notification under Notification Center - Notifications and select Form submission as the notification type.

Create a message:

Then create a new message and select the gateway. If no gateway exists yet, go to Gateways in the left navigation and create one. There you can also enter SMTP data by ticking Override SMTP settings. Don’t forget to tick the checkbox to publish the message.

Create a language:

Once the gateway is selected in the message, you can add new languages with the button Manage languages. A new window opens where you can create a new language with the button at the top right.

The following steps are required (see the following screenshot):

• Select the language German and enable the fallback language checkbox
• Fill in the metadata (sender name, sender email, recipient)
• Fill in the content
  • Enter the email subject
  • Select the mode HTML and text
  • In raw text, enter e.g. ##raw_data##
  • Fill in the HTML (example at the end of this page)
• Under Attachments - Attachments from templates, select the openimmo_feedback.xml you just created

You could, for example, insert the following HTML code in the HTML field. Click the icon <> to open the source code editor and paste the HTML code. The example email is in German, as the OpenImmo format is mainly used in Germany.

<!-- BODY -->
<table class="body-wrap" style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; width: 100%; background: #f5f5f5;">
<tbody>
	<tr>
		<td class="container" style="margin: 0 auto!important; display: block!important; max-width: 600px;" align="" bgcolor="#FFFFFF">
			<h1 style="margin: 20px 15px; padding: 10px; line-height: 1.1; margin-bottom: 15px; color: #000; font-size: 14px; background: #f2f2f2; font-weight: bold;">Objektanfrage</h1>
			<!-- content -->
			<div class="content" style="padding: 5px 15px;">
				<h2 style="margin: 0; padding: 5px 10px; line-height: 1.1; margin-bottom: 15px; color: #fff; font-size: 14px; background: #00a0e1;">Daten zum Objekt</h2>
				<table class="greybox obj-daten" style="margin: 0; padding: 15px; background: #f2f2f2; margin-bottom: 20px; width: 100%;" bgcolor="">
				<tbody>
					<tr style="margin: 0; padding: 0;">
						<td style="margin: 0; padding: 0;">
							<p style="margin: 0; padding: 0; color: #000; margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 1.6;"><label style="margin: 0; padding: 0; font-weight: bold; color: #000; display: inline-block;">Objekt-Nr:</label> ##form_oobj_id##</p>
						</td>
					</tr>
				</tbody>
				</table>
				<h2 style="margin: 0; padding: 5px 10px; line-height: 1.1; margin-bottom: 15px; color: #fff; font-size: 14px; background: #00a0e1;">Anmerkungen/Fragen</h2>
				<table class="greybox" style="margin: 0; padding: 15px; background: #f2f2f2; margin-bottom: 20px; width: 100%;" bgcolor="">
				<tbody>
					<tr style="margin: 0; padding: 0;">
						<td style="margin: 0; padding: 0;">
							<p style="margin: 0; padding: 0; color: #000; margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 1.6;">##form_anfrage##</p>
					</td>
					</tr>
				</tbody>
				</table>
				<h2 style="margin: 0; padding: 5px 10px; line-height: 1.1; margin-bottom: 15px; color: #fff; font-size: 14px; background: #00a0e1;">Ihre Angaben</h2>
				<table class="greybox" style="margin: 0; padding: 15px; background: #f2f2f2; margin-bottom: 20px; width: 100%;" bgcolor="">
				<tbody>
					<tr style="margin: 0; padding: 0;">
						<td style="margin: 0; padding: 0;">
							<p style="margin: 0; padding: 0; color: #000; margin-bottom: 5px; font-weight: normal; font-size: 14px; line-height: 1.6;">
							{if form_firma!=""} <strong>Firma:</strong> ##form_firma##<br>{endif}
							<strong>Name:</strong> ##form_vorname## ##form_nachname##<br>
							<strong>Straße:</strong> ##form_strasse##<br>
							<strong>PLZ/Ort:</strong>##form_plz## ##form_ort##<br>
							<strong>E-Mail:</strong> ##form_email##<br>
							<strong>Tel:</strong> ##form_tel##<br>
							{if form_fax!=""}<strong>Fax:</strong> ##form_fax##<br>{endif}
							{if form_wunsch!=""}Ich bitte um einen {if form_wunsch=="BESICHTIGUNG"}Besichtigungstermin{endif}{if form_wunsch=="RÜCKRUF"}Rückruf{endif}<br>{endif}
							{if form_bevorzugt!=""}Ich bitte um Übersendung eines Exposés per {if form_bevorzugt=="EMAIL"}E-Mail{endif}{if form_bevorzugt=="POST"}Post{endif}{if form_bevorzugt=="FAX"}Fax{endif}<br>{endif} 
							{if form_AGBs!=""}Ich bin damit einverstanden, dass XXX mich kontaktiert (telefonisch, per Post oder Email) und meine Daten für interne Zwecke speichert. Ich habe die AGB und die Datenschutzerklärung gelesen. Mit den AGB und der Datenschutzerklärung von XXX erkläre ich mich hiermit ausdrücklich einverstanden.{endif}
							</p>
						</td>
					</tr>
				</tbody>
				</table>
			</div>
			<!-- /content -->
		</td>
	</tr>
</tbody>
</table>
<!-- /BODY -->

If everything has been set up according to this guide, the OpenImmo feedback XML form should now work. :)

Displaying images

Displaying images

Here you find various code snippets that you can add to the detail view template to display images.

Output all images:

<?php foreach ($this->estate->attachments()->startAt(0) as $attachment) : ?>
    <?php $attachment->size(600,350)->render() ?>
<?php endforeach; ?>

This snippet outputs all attachments of the group BILD. With startAt() you can specify any start position. With size() you specify the image width and height.

Output a specific number of images:

<?php foreach ($this->estate->attachments()->range(0,3) as $attachment) : ?>
    <?php $attachment->size(600,350)->render() ?>
<?php endforeach; ?>

With range() you specify a start position (starting at 0) and the length. For example, range(0,3) outputs 3 images starting at position 0.

Output images of one or more groups:

<?php foreach ($this->estate->attachments()->startAt(0) as $attachment) : ?>
    <?php $attachment->group("BILD,GRUNDRISS,AUSSENANSICHTEN,INNENANSICHTEN,PANORAMA")->size(600,350)->render() ?>
<?php endforeach; ?>

With group() you specify attachments of a certain group. Enter several groups comma-separated.

Header image with headline

Header image with headline

1 / Create a module:

Under Themes and Modules in the theme of your website, create a new module.

Select the module type “MaklerModul Kopfbild” (header image). If the property title should be shown as the headline, select the option “Show headline”. Alternatively, you can enter your own headline that replaces the property title in the header image (the option “Show headline” must be selected). The header image can be shown either as a normal image or as a background image.

You can also set your own placeholder image for the header image in case a property has no image. If no placeholder image is selected and the property has no image, a placeholder image provided by the module is shown.

2 / Create a content element:

You can also create the header image as a content element in an article. Select MaklerModul Kopfbild under pdirMaklermodul as the element type. The content element offers exactly the same settings as the module.

3 / This is what the finished header image can look like: