Google Maps in Contao einbinden

Google Maps Karte in Contao Websites einbetten: Schnell & einfach ohne zusätzliche Erweiterung und mit Contao Bordmitteln ans gewünschte Ziel.

Google Maps in Contao einbinden

Ein gerne und oft verwendetes Element auf der Kontaktseite einer Unternehmenswebsite ist die Google Maps Karte. Mit ihrer Hilfe wird dem Besucher schnell und einfach die Anfahrt zum Unternehmen angezeigt. Noch dazu sind die Karten sehr einfach in Contao zu integrieren. Natürlich gibt es hierfür entsprechende Erweiterungen, wir möchten uns in diesem Artikel allerdings auf Contao Bordmittel beschränken. Demnach ist alles, was wir zunächst benötigen ein HTML Content-Element.
Aber der Reihe nach.

1. Google Maps Karte erzeugen

Den gewünschten Kartenausschnitt stellen wir einfach in Google Maps selbst ein. Dazu navigieren wir unseren Browser zu https://www.google.de/maps/ und suchen uns den gewünschten Ausschnitt aus. Links oben findet sich das "Hamburger" Menü. Dieses öffnen wir und wählen die Option: "Karte teilen oder einbetten". Dann öffnet sich ein Fenster in dem der Code zum Einbetten angezeigt wird. Standardmäßig erhalten wir einen Codeschnipsel, wie den folgenden. Diesen können wir nun einfach kopieren. 

<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2554.4445122056813!2d8.631361151912412!3d50.19022157933956!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bd09ac35982bf9%3A0xd3247f5417cca2f6!2sPergamon+Interactive+GmbH!5e0!3m2!1sde!2sde!4v1470062917367"
width="600" height="450"
frameborder="0"
style="border:0"
allowfullscreen>
</iframe>

TIP

Nicht vergessen, den iframe-Tag in Contao zu erlauben! Das ist eine häufige Fehlerquelle, wenn mit eigenen HTML-Inhaltselementen gearbeitet wird: Ist ein verwendeter Tag in den Contao System-Einstellungen nicht freigegeben, verschwindet der Tag nach dem Speichern aus dem Textfeld (ältere Contao Versionen) oder er wird - noch verwirrender - zwar gespeichert, aber im Frontend nicht ausgegeben. Letzteres Verhalten kann mitunter sehr nervenaufreibend werden, da sich die Fehlerquelle kaum erschließt.
Sofern der iframe-Tag also noch nicht freigegeben ist, sollten wir dies nun unter System -> Einstellungen -> Sicherheitseinstellungen -> Erlaubte HTML-Tags jetzt tun. 

2. Google Maps Code in Contao einfügen

Wir navigieren uns nun also zu unserer Kontaktseite und erstellen ein neues Element vom Typ HTML. Hier können wir nun unseren bei Google Maps erzeugten Code-Schnipsel einfügen. Standardmäßig finden wir die Größenangaben des iframes an dessen Ende. Bei der Einstellung Mittel ist dieser nun 600x450 Pixel groß. Möchten wir eine andere Ausgabe, können wir die Werte bei width und height ändern, auch in Prozent wie im folgenden Beispiel zu sehen: 

<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2554.4445122056813!2d8.631361151912412!3d50.19022157933956!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bd09ac35982bf9%3A0xd3247f5417cca2f6!2sPergamon+Interactive+GmbH!5e0!3m2!1sde!2sde!4v1470062917367"
width="100%"
height="550"
frameborder="0"
style="border:0"
allowfullscreen>
</iframe>

3. Überscrollen via CSS ermöglichen

Die reine Einbindung der Google Maps Karte auf unserer Contao Website haben wir damit eigentlich bereits geschafft. Kommen wir nun zum Feintuning:

Wer schon einmal versucht hat mit seinem Smartphone eine auf einer Website großflächig eingebundene Google Maps Karte zu überscrollen, um an die darunter liegenden Inhalte zu gelangen, der weiß worum es hier geht. Die Betonung liegt hierbei auf "versucht", da die Karte beim darüber wischen standardmäßig zoomt, statt sich überscrollen zu lassen. Hier wird dem User viel Fingerfertigkeit und Geduld abverlangt.
Benutzerfreundlicher und nervenschonender wird es, wenn wir unserer Karte den Zoom erst nach einem eindeutigen Klick oder eben Tippen erlauben. Dies gelingt ziemlich simpel mit einem weiteren div-Tag und ein klein wenig CSS.

Wir erstellen also ein weiteres HTMl-Element, das wie folgt aussieht und legen dieses über das soeben erstellte Karten-HTML-Element. 

<div class="overlay" onclick="style.pointerEvents='none'"></div>

Unser CSS erweitern wir nun mit folgenden Parametern: 

.overlay {
    background: rgba(0, 0, 0, 0);
    position: relative;
    z-index: 100;
    width: 100%;
    height: 550px;
    top: 550px;
    margin-top: -550px;
    display: block !important
}

Wer wissen möchte, warum und wie das Ganze mit dem CSS Pointer Event genau funktioniert, dem sei folgender Link ans Herz gelegt: https://css-tricks.com/. Alle anderen dürfen sich darüber freuen, ihren Usern etwas mehr Komfort eingebaut zu haben.

4. Eigene Styles für Google Maps Karten

Kurz erwähnt sei auch noch die Möglichkeit, Google Maps Karten zu individualisieren. So lassen sich individuelle Marker setzen, die Karte umfärben, spezifische Gelände hervorheben u.s.w..

Damit wir den Google Maps Karten einen eigenen Style verpassen können, können wir die Google Maps Javascript APIs verwenden. Um diese nutzen zu können, müssen wir uns wiederum vormals bei Google registrieren. In den meisten Fällen werden wir dies bereits für die Nutzung von Google Analytics getan haben und können uns mit diesen Userdaten auch bei den Google APIs anmelden. Zu finden unter: https://developers.google.com/
Nachdem wir den Nutzungsbedingungen zugestimmt haben, wird dort dann unser erstes Projekt erstellt. Für die Nutzungsbedingungen sollte man sich allerdings etwas Zeit nehmen, da diese ausgesprochen umfangreich sind und leider nur in englisch vorliegen.
Haben wir diese Hürde allerdings geschafft, ist es im nächsten Schritt dann ganz einfach die Karten via Javascript zu laden und zu individualisieren. Wir erhalten ein kleines Script, welches wir anstelle des iframes in unsere Seite einbinden. Das Script wiederum erzeugt anschließend die Karte. Um wirklich alle Möglichkeiten auszuloten, ist es notwendig sich die Dokumentation, die ausnahmsweise auch in Deutsch vorliegt, durchzulesen.

5. Kosten für die Nutzung der Google Maps API

Die Nutzung der Karte auf der eigenen Website ist kostenlos. Fast! Denn ab 25000 Aufrufen innerhalb von 24 Stunden verlangt Google dann doch Geld - zumindest für die Nutzung der Javascript API. Glücklicherweise muss man dem aber zuerst zustimmen. Sollte unser Kontingent erschöpft sein, wird die Karte erstmal nicht mehr angezeigt und wir werden von Google verständigt. Das Preismodel von Google ist allerdings ebenfalls recht komplex angelegt: https://developers.google.com/.

zur Blogübersicht

Online Website Check

Einzelne Webseiten in wenigen Sekunden auf Fehler überprüfen, Optimierungspotenziale herausfinden und direkt verbessern. Kostenlos und anonym mit unserem Website Check Tools.

Hilfe & Support

Sie haben eine Contao Website und benötigen professionelle Unterstützung für Ihr Projekt im Bereich Webdesign, Programmierung, Software oder Online Marketing? Nehmen Sie Kontakt zu uns auf, wir freuen uns auf Sie.  

Cookie- & Analyse Einstellungen

Voreingestellt sind ausschließlich zulässige Cookies, für die keine Einwilligung benötigt wird. Analyse und Tracking, sowie weiteren funktionellen Cookies, können Sie unter "Mehr" durch Anwählen von "Ja" zustimmen.
Weitere Infos zu Cookies und Ihrem Datenschutz stellen wir Ihnen in der Datenschutzerklärung vor.

Verweigern
Akzeptieren
Mehr