tdoescher/googlemaps-bundle

Content Element für Google Maps Embed API oder HTML-Code

Maintainers

Details

github.com/tdoescher/contao-googlemaps-bundle

Source

Issues

Installs: 4 248

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 1

Forks: 0

Open Issues: 1

Type:contao-bundle

pkg:composer/tdoescher/googlemaps-bundle

3.1.0 2025-08-29 10:29 UTC

Requires

LGPL-3.0-or-later ffc1dcad4ba1dd5391b0589624e5d1502b99897c

This package is auto-updated.

Last update: 2026-02-26 14:44:47 UTC

README

Contao 5 Bundle zur Einbindung von Google Maps als Content-Element. Es stehen zwei Element-Typen zur Verfügung:

  • Google Maps Embed – Einbindung per iFrame via Google Maps Embed API (API-Key erforderlich)
  • Google Maps HTML – Ausgabe von benutzerdefiniertem HTML-Code der Google Maps JavaScript API

Content-Elemente

Google Maps Embed (googlemaps_embed)

Bettet eine Google Maps Karte per iFrame ein. Die Karte wird über die Google Maps Embed API geladen.

Felder:

Feld Beschreibung Pflichtfeld
googlemaps_title Titel des iFrame (Barrierefreiheit) Nein
googlemaps_apikey Google Maps API-Key Ja
googlemaps_zoom Zoom-Stufe (Standard: 16) Ja
googlemaps_address Adresse oder Ortsbezeichnung Ja

Im Backend wird die eingetragene Adresse als Vorschau angezeigt.

Google Maps HTML (googlemaps_html)

Gibt benutzerdefiniertes HTML aus, das z. B. über die Google Maps JavaScript API erzeugt wurde. Der Code wird direkt aus dem Feld unfilteredHtml ausgegeben.

Im Backend wird ein statischer Platzhaltertext angezeigt.

CSP-Konfiguration

Die Templates setzen automatisch die erforderlichen Content Security Policy Header:

Embed-Element:

  • frame-src https://www.google.com

HTML-Element:

  • connect-src https://*.google.com, https://*.googleapis.com, https://*.gstatic.com
  • font-src https://fonts.gstatic.com
  • img-src https://*.google.com, https://*.googleapis.com, https://*.googleusercontent.com, https://*.gstatic.com
  • script-src https://*.google.com, https://*.googleapis.com
  • style-src 'unsafe-inline' https://fonts.googleapis.com

Template-Anpassung

Die Twig-Templates befinden sich unter contao/templates/content_element/ und können wie bei Contao üblich überschrieben werden:

  • googlemaps_embed.html.twig
  • googlemaps_html.html.twig

Beide Templates erweitern @Contao/content_element/_base.html.twig und verwenden responsive Container mit BEM-Klassen:

.content-googlemaps-embed__container
.content-googlemaps-embed__responsive

.content-googlemaps-html__container
.content-googlemaps-html__responsive