--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/karte' title: 'Eine Karte hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-23T23:54:53+00:00' updated: '2026-10-24T19:36:26+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Sie zeigen Besuchern mit einer Google Map jeder Adresse, wo sie Sie finden. Nutzen Sie sie auf Kontakt-, Veranstaltungs- und Anfahrtsseiten.' tags: - 'Data and motion' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T19:36:26+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Eine Karte hinzufügen' description: 'Sie zeigen Besuchern mit einer Google Map jeder Adresse, wo sie Sie finden. Nutzen Sie sie auf Kontakt-, Veranstaltungs- und Anfahrtsseiten.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T23:54:53+0000' dateModified: '2026-10-24T19:36:26+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/karte' articleSection: 'Daten und Animation' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/elemente/karte' description: 'Sie zeigen Besuchern mit einer Google Map jeder Adresse, wo sie Sie finden. Nutzen Sie sie auf Kontakt-, Veranstaltungs- und Anfahrtsseiten.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Inhalte hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements) /[Daten und Animation](/de/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Eine Karte hinzufügen. DXPR Builder lernenSeiten erstellenInhalte hinzufügenDaten und Animation ## In diesem Leitfaden Verwandte Leitfäden - [Das Aussehen eines Elements im Style-Tab ändern](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab) Sie zeigen Besuchern mit einer Google Map jeder Adresse, wo sie Sie finden. Nutzen Sie sie auf Kontakt-, Veranstaltungs- und Anfahrtsseiten. ## Eine Karte hinzufügen Öffnen Sie Ihre Seite im angemeldeten Zustand: Wenn Sie mit der Maus über den Inhaltsbereich fahren, erscheinen die Steuerelemente des Builders. [Ihre erste Seite](/de/hc/dokumentation/dxpr-builder-lernen/erste-schritte/erste-seite) zeigt die Grundlagen. 1. Fahren Sie mit der Maus über die Spalte und klicken Sie in ihrer Steuerleiste auf **+**; klicken Sie auf einer leeren Seite auf **Add Elements**. Öffnen Sie den **Content**-Tab und klicken Sie auf **Map**. Die Karte landet oben in der Spalte und ihr Einstellungsdialog öffnet sich. 2. Geben Sie im Dialog die **Address** mit Stadt und Land ein. 3. Stellen Sie die **Map height** ein, wenn Sie eine andere möchten. Die Vorgabe ist `400px` und eine bloße Zahl wie 360 zählt als Pixel. 4. Klicken Sie im Dialog auf **Speichern**. Klicken Sie dann in der Symbolleiste oben im Inhaltsbereich auf **Speichern**, um die Seite zu speichern. ## Was Sie sehen Eine auf die von Ihnen eingegebene Adresse zentrierte Google Map füllt die Spalte und Besucher können sie zoomen und ziehen. Im Video zeigt sie die Rue de la Loi 200 in Brüssel mit 360 Pixeln Höhe. Besucher sehen sie, sobald Sie die Seite speichern und sie veröffentlicht ist. ## Ihre Karte einrichten Fahren Sie mit der Maus über das Element und öffnen Sie in seiner Steuerleiste **More > Settings**. Optionen: - **Address:** der anzuzeigende Ort. Er geht als Suche an Google Maps, geben Sie ihn also so ein wie in Google Maps. - **Map width:** `100%` ist die Vorgabe und füllt die Spalte. Eine bloße Zahl zählt als Pixel und CSS-Werte wie `600px` funktionieren ebenfalls. - **Map height:** `400px` ist die Vorgabe. Eine bloße Zahl zählt als Pixel. Die Karte braucht keinen Google-API-Schlüssel. ## Wenn Sie es nicht sehen - **Die Karte ist nicht im Content-Tab.** Ihr Benutzerprofil blendet sie aus. Bitten Sie die Administration, sie unter [User Profiles](/de/hc/dokumentation/dxpr-builder-lernen/verwaltung/benutzerprofile-verwaltung) zu aktivieren. - **Es ist nach dem Neuladen verschwunden.** Die Seite wurde nicht gespeichert. Fügen Sie es erneut hinzu und klicken Sie in der Symbolleiste oben im Inhaltsbereich auf **Speichern**. - **Das Kartenfeld ist leer, grau oder zeigt einen Verbindungsfehler.** Die Karte lädt in einem Rahmen von maps.google.com und etwas blockiert diesen Rahmen: eine Browser-Datenschutzerweiterung, ein Cookie-Zustimmungstool oder die Sicherheitsrichtlinie Ihrer Website. Erlauben Sie maps.google.com oder prüfen Sie die Seite in einem anderen Browser. - **Die Karte zeigt den falschen Ort.** Google hat der **Address** einen anderen Ort zugeordnet. Ergänzen Sie Hausnummer, Stadt und Land. - **Die Karte ist zu klein.** **Map width** oder **Map height** steht niedrig. Fahren Sie mit der Maus über das Element und öffnen Sie **More > Settings**, und versuchen Sie dann `100%` und `400px`. ## Wie geht es weiter? [Style-Tab](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab), um Abstände und Hintergrund Ihrer Karte zu ändern.