--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/plattegrond' title: 'Een plattegrond toevoegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:32:43+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: "Je laat bezoekers zien waar ze je vinden met een Google Maps-kaart van elk adres. Gebruik hem op contact-, evenement- en routepagina's." 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-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Een plattegrond toevoegen' description: "Je laat bezoekers zien waar ze je vinden met een Google Maps-kaart van elk adres. Gebruik hem op contact-, evenement- en routepagina's." image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:32:43+0000' dateModified: '2026-10-24T17:19:22+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/nl/hc/documentatie/dxpr-builder-leren/elementen/plattegrond' articleSection: 'Data en beweging' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/plattegrond' description: "Je laat bezoekers zien waar ze je vinden met een Google Maps-kaart van elk adres. Gebruik hem op contact-, evenement- en routepagina's." breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Content toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements) /[Data en beweging](/nl/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Een plattegrond toevoegen. DXPR Builder lerenPagina’s bouwenContent toevoegenData en beweging ## In deze gids Gerelateerde gidsen - [Het uiterlijk van een element wijzigen in het paneel Stijl](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/stijl-tabblad) Je laat bezoekers zien waar ze je vinden met een Google Maps-kaart van elk adres. Gebruik hem op contact-, evenement- en routepagina's. ## Een plattegrond toevoegen Open je pagina terwijl je bent ingelogd: de builder-knoppen verschijnen als je met de muis over het inhoudsgebied beweegt. [Je eerste pagina](/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina) legt de basis uit. 1. Beweeg over de kolom en klik op **+** in de besturingsbalk, of klik op **Add Elements** op een lege pagina. Open het tabblad **Inhoud** en klik op **Plattegrond**. De plattegrond komt bovenaan de kolom te staan en het dialoogvenster opent. 2. Typ in het dialoogvenster het **Adres** met de plaats en het land. 3. Stel de **Kaarthoogte** in als je een andere wilt. De standaard is `400px`, en een kaal getal zoals 360 telt als pixels. 4. Klik in het dialoogvenster op **Opslaan**. Klik daarna op **Opslaan** in de werkbalk bovenaan het inhoudsgebied om de pagina op te slaan. ## Wat je ziet Een Google Maps-kaart gecentreerd op het adres dat je hebt getypt vult de kolom, en bezoekers kunnen zoomen en slepen. In de video toont hij Rue de la Loi 200 in Brussel, 360 pixels hoog. Bezoekers zien hem zodra je de pagina opslaat en publiceert. ## Je plattegrond instellen Beweeg over het element en open **More > Settings** in de besturingsbalk. Opties: - **Adres:** de plek om te tonen. Hij gaat als zoekopdracht naar Google Maps, dus typ hem zoals je in Google Maps zou doen. - **Kaartbreedte:** `100%` is de standaard en vult de kolom. Een kaal getal telt als pixels, en CSS-waarden zoals `600px` werken ook. - **Kaarthoogte:** `400px` is de standaard. Een kaal getal telt als pixels. De kaart heeft geen Google API-sleutel nodig. ## Als je het niet ziet - **Plattegrond staat niet in het tabblad Inhoud.** Je gebruikersprofiel verbergt hem. Vraag een beheerder om hem in te schakelen in [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). - **Hij is weg na het herladen.** De pagina is niet opgeslagen. Voeg hem opnieuw toe en klik op **Opslaan** in de werkbalk bovenaan het inhoudsgebied. - **Het kaartvak is leeg, grijs of toont een verbindingsfout.** De kaart laadt in een frame van maps.google.com, en iets blokkeert dat frame: een privacy-extensie in de browser, een cookie-toestemmingstool of het beveiligingsbeleid van je site. Sta maps.google.com toe, of bekijk de pagina in een andere browser. - **De kaart toont de verkeerde plek.** Google heeft een andere plek bij het **Adres** gezocht. Voeg het huisnummer, de plaats en het land toe. - **De kaart is te klein.** **Kaartbreedte** of **Kaarthoogte** staat laag. Beweeg over het element en open **More > Settings** en probeer `100%` en `400px`. ## Wat nu? [Tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab) om de witruimte en achtergrond van je plattegrond aan te passen.