Eine Karte zu Seiten hinzufügen

Ganz gleich, ob Sie Kunden zu einem lokalen Sonnenuntergangs-Workshop führen, den genauen Standort eines abgelegenen Landschafts-Fotoshootings markieren oder Besucher zu Ihren Galerieräumen leiten – der Karte-Block bietet ein nahtloses, interaktives Layout-Element für Ihre Website.

Der „Map“-Block nutzt eine sichere iframe-Einbettung, um auf Ihrer live geschalteten, öffentlichen Website angezeigt zu werden. Im Gegensatz zu ressourcenintensiven WordPress-Themes, die auf komplexe JavaScript-APIs angewiesen sind, sorgt dieser Ansatz für schnelle Ladezeiten und eine mobilfreundliche Darstellung.

Voraussetzungen: Wählen Sie Ihren Weg

Weg A: Keine Einrichtung erforderlich (direkte Einbettungs-URL einfügen)

Ideal, wenn Sie nur einmalig eine Karte auf einer bestimmten Seite benötigen und die Google Cloud Console nicht nutzen möchten.

1. Rufen Sie Google Maps auf.
2. Suchen Sie nach Ihrem Standort und klicken Sie dann auf Teilen.
3. Wählen Sie die Registerkarte „Karte einbetten“.
4. Kopieren Sie nur die Quell-URL innerhalb des Attributs src="..." des generierten Iframe-Snippets. Diese sieht etwa so aus:
   https://www.google.com/maps/embed?pb=!1m18!1m12...
5. Sie können diese URL in das Feld Attr einfügen (siehe unten) – ein API-Schlüssel ist nicht erforderlich.

Weg B: Nahtlose Generierung (globalen API-Schlüssel speichern)

Empfohlen für aktive Workshop-Leiter und Veranstaltungsorganisatoren. Speichern Sie einen Entwicklerschlüssel in ArtInStack und generieren Sie dann Karten-Einbettungen anhand einer Adresse direkt im Seiteneditor.

1. Öffnen Sie in Ihrem Dashboard Einstellungen → Integrationen → Karten.
2. Wählen Sie Google Maps als Anbieter aus.
3. Fügen Sie Ihren Google Maps Embed API-Schlüssel ein.
   • Profi-Tipp: Aktivieren Sie die Maps Embed API in Google Cloud und fügen Sie eine **HTTP-Referrer-**Einschränkung für Ihre Domain hinzu, um die unbefugte Nutzung Ihres Schlüssels zu verhindern.

Den Block hinzufügen

1. Öffnen Sie Seiten → Bearbeiten → Seiteneditor.
2. Klicken Sie in der rechten Seitenleiste auf Blöcke (Plus-Symbol).
3. Ziehen Sie unter Medien den Block Karte in eine Spalte (oder lassen Sie ihn vom Editor automatisch in Abschnitt → Zeile → Spalte einfügen).
4. Seite speichern und veröffentlichen, wenn Sie fertig sind.

Unter „Attr“ konfigurieren

Wählen Sie den Kartenblock aus → Bearbeiten → Attr:

Einstellung	Funktion
Adresse oder Ort	Geben Sie eine natürliche Adresse ein (z. B. Mono Lake Tufa State Natural Reserve oder 123 Main St, Atlanta, GA) und klicken Sie auf Aktualisieren, um einen Einbettungscode zu generieren (Pfad B – erfordert einen gespeicherten API-Schlüssel)
Oder Einbettungs-URL einfügen	Fügen Sie eine rohe URL im Format https://www.google.com/maps/embed?... ein. Hat Vorrang; funktioniert ohne gespeicherten API-Schlüssel (Pfad A)
Zoomstufe	Gilt bei der Generierung anhand einer Adresse (Weg B)
Kartentyp	Straßenkarte oder Satellitenansicht
Höhe	Blockieren Sie die Höhe des Ansichtsfensters (z. B. 400px), um sie an Ihr Layout anzupassen

Wenn Sie eine eingefügte Google-Einbettungs-URL mit pb= verwenden, stammen Zoom und Bildausschnitt aus dem Export, den Sie in Google Maps erstellt haben – nicht vom Zoom-Schieberegler.

> Suchen Sie nach der Impact-Karte? Der Standardblock Karte ist für einen einzelnen Standort auf einer Seite vorgesehen. Um ein mit Geotags versehenes Portfolio mit Markierungen in verschiedenen Regionen anzuzeigen, verwenden Sie stattdessen den Impact Map-Block – Fügen Sie einer Seite eine Impact Map hinzu.

Fehlerbehebung

Symptom	Was zu überprüfen ist
Aktualisieren (Generieren) ist deaktiviert	Kein API-Schlüssel gespeichert – öffnen Sie Einstellungen → Integrationen → Karten oder fügen Sie eine direkte Einbettungs-URL (Pfad A) ein
Leere Karte oder Google-API-Warnung	Maps Embed API in Google Cloud aktiviert; HTTP-Referrer-Einschränkungen umfassen Ihre Produktionsdomain (und localhost bei lokalen Tests)
Karte sieht nach dem Einfügen falsch aus	Erneut über „Karte einbetten“ in Google Maps exportieren und die vollständige src-URL erneut einfügen
Block funktioniert im Editor, aber nicht live	Seite speichern, veröffentlichen und die öffentliche URL testen

Informationen zu Layout-Blöcken rund um die Karte finden Sie unter Editor-Blöcke und Layout-Referenz.

Überprüfen Ihrer Einrichtung

1. Veröffentlichen Sie eine Testseite mit einem Karte-Block.
2. Vergewissern Sie sich, dass die Karte unter der öffentlichen URL geladen wird (auf dem Desktop und auf Mobilgeräten).
3. Wenn Sie Pfad B verwenden, ändern Sie die Adresse unter Attr, klicken Sie auf Aktualisieren, speichern Sie und überprüfen Sie, ob die Einbettung aktualisiert wurde.