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/.

Ihre Meinung ist uns wichtig! Bewerten Sie diesen Artikel!

Je höher die Prozentzahl, desto höher Ihre Zustimmmung: 0 = überhaupt nicht | 100% = volle Zustimmung

Ø 74% von 7 Bewertungen

50%
 
50%
 

Einen Kommentar schreiben

Latest Security News

Vorsicht vor gefälschten Mails von DHL!

Derzeit sind  Mails im Umlauf, die vorgeben von DHL zu stammen und veränderte Zustelltermine ankündigen. Die Mails sind überaus gut gemacht und kaum von originalen DHL Mails zu unterscheiden. Keinesfalls auf einen der enthaltenen Links klicken!

Hallo!

Hier schreibt das Team der Pergamon interactive GmbH über das CMS Contao, SEO, Rechtliches und eigene Projekte. Wir freuen uns über Feedback, Kommentare & Bewertungen.

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.  

Ähnliche Beiträge

Contao auf einem Webserver installieren

Contao auf einem Webserver installieren

In diesem Beitrag dreht sich alles um die Contao Installation auf einem Webserver: Wie das Contao-ZIP-Archiv direkt auf dem Server entpackt und installiert werden kann, was zu beachten ist und welche Vorraussetzungen gegeben sein müssen. 

Contao FAQ System

Contao FAQ System

FAQs eignen sich hervorragend zur übersichtlichen Ausgabe von Antworten zu einem bestimmten Themengebiet. Contao bringt standardmäßig ein FAQ-System mit. Wir zeigen, wie das System konfiguriert und eingesetzt wird.

Contao Systemeinstellungen Teil 2

Contao Systemeinstellungen Teil 2

Im zweiten Teil zu den Contao Systemeinstellungen beschäftigten wir uns mit den wichtigsten Einstellungen für Sicherheit und den Optionen für Up- & Download von Dateien und Bildern.