---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/map'
title: 'Adding a Map | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:32:43+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Google Maps embed'
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-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding a Map'
      description: 'Google Maps embed'
      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-23T14:31:17+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/hc/documentation/learn-dxpr-builder/elements/map'
      articleSection: 'Data and motion'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/map'
      description: 'Google Maps embed'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Data and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adding a Map.

Google Maps embed

 Learn DXPR BuilderBuild pagesAdd contentData and motion

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You show visitors where to find you with a Google Map of any address. Use it on contact, event and directions pages.

## Add a map

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Map**. It lands at the top of the column and its settings dialog opens.
2. In the dialog, type the **Address** with the city and country.
3. Set the **Map height** if you want a different one. The default is `400px`, and a plain number such as 360 counts as pixels.
4. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

A Google Map centred on the address you typed fills the column, and visitors can zoom and drag it. In the video, it shows Rue de la Loi 200 in Brussels at 360 pixels high. Visitors see it once you save the page and it is published.

## Set up your map

Hover the element and open **More > Settings** in its control bar. Options:

- **Address:** the place to show. It goes to Google Maps as a search, so type it as you would in Google Maps.
- **Map width:** `100%` by default, which fills the column. A plain number counts as pixels, and CSS values such as `600px` also work.
- **Map height:** `400px` by default. A plain number counts as pixels.

The map needs no Google API key.

## If you don't see it

- **Map is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **The map box is empty, grey or shows a connection error.** The map loads in a frame from maps.google.com, and something blocks that frame: a browser privacy extension, a cookie-consent tool or your site's security policy. Allow maps.google.com, or check the page in another browser.
- **The map shows the wrong place.** Google matched a different place to the **Address**. Add the street number, city and country.
- **The map is too small.** **Map width** or **Map height** is set low. Hover the element and open **More > Settings**, then try `100%` and `400px`.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your map.