Docs

Google Maps

An embedded map for an address or place.

On this page

The Google Maps widget embeds a map for an address, a place name or coordinates, with a zoom level, a map type and an adjustable height. It needs no API key. Maps load lazily, and with Load on click they load only when a visitor asks for them, which helps with privacy laws such as the GDPR.

A map placeholder on a light grid with a red pin, the text “Pearl District, Portland, OR”, a Show map button and the note “Loads the map from Google Maps”
With Load on click, visitors see this placeholder until they click Show map.

Add a map

  1. Insert it

    Open Insert in the left panel, find Google Maps under Media (or type map in Search widgets) and click it or drag it onto the canvas.

  2. Enter the location

    Type an address, a place name or coordinates in Location. The canvas shows the map.

  3. Adjust the view

    Set the Zoom, Map type and Height. Turn on Grayscale for a quieter map that matches a calm design.

  4. Decide when it loads

    Turn on Load on click to show a placeholder until the visitor clicks Show map.

The Google Maps inspector with Location, Zoom, Map type, Height, Grayscale, Accessible title, Load on click turned on, Button text and Privacy note
Content → Map with Load on click turned on.

Load the map only on click

With Load on click on, visitors first see a placeholder drawn by your own site: a pin, the location, a button and a short privacy note. Nothing is requested from Google, and no Google cookies are set, until the visitor clicks. Then the real map loads in place. Change the button and the note with Button text and Privacy note.

In the editor you always see the real map, so you can check the location and zoom.

Settings

Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). Location supports dynamic tags, for example an address from a custom field (see Dynamic tags).

Content tab

Map
SettingWhat it does
LocationThe place to show: an address, a place name or coordinates. Supports dynamic tags.
ZoomHow close the map is, from 1 (the whole world) to 20 (single buildings). Default: 14.
Map typeRoadmap, satellite, hybrid (satellite with labels) or terrain. Options: Roadmap, Satellite, Hybrid, Terrain. Default: Roadmap.
HeightHeight of the map. Per device.
GrayscaleShows the map in shades of gray, to blend with a calm design.
Color on hoverBrings the colors back when the pointer is over the map. Shown when Grayscale is on.
Accessible titleName of the map for screen readers. Defaults to “Map of” followed by the location.
Load on clickShows a placeholder drawn by your site with the location and a button; Google Maps (and its cookies) load only when the visitor clicks it. Helps with privacy laws such as the GDPR. The editor always shows the real map.
Button textText of the button on the placeholder. Leave empty for “Show map”. Shown when Load on click is on.
Privacy noteA short privacy note under the button. Shown when Load on click is on.

Design tab

Map
SettingWhat it does
Border radiusRounds the corners of the map. Per device.
BorderBorder of the map.
ShadowShadow of the map.
Normal › CSS filtersBlur, brightness, contrast, saturation and hue of the map.
Hover › CSS filtersFilters of the map on hover.
Hover › Transition (ms)Duration of the hover change, in milliseconds.
Shared Design sections

Every element also has these sections at the end of the Design tab.

SectionWhat it does
Spacing & positionMargin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position.
Background & borderBackground, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows.
MaskCrops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks.

Behaviour tab

Behaviour sections

The Behaviour tab is the same for every element.

SectionWhat it does
Anchor & classesAn Anchor ID for #links and your own CSS classes.
AnimationsEntrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects.
Motion & effectsA simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning.
Scroll & mouse effectsMovement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt).
VisibilityHide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility.
ConditionsShow the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions.
InteractionsShow, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions.
AttributesCustom HTML attributes for this element. See Anchor, classes & attributes.

Tips

  • Name the map. Screen readers announce the Accessible title. The default, “Map of” followed by the location, is fine; make it more specific if the page has several maps.
  • Also write the address. Put the address in text next to the map too, for visitors who don't load the map and for search engines.
  • Height on phones. A tall map fills a phone screen and gets in the way of scrolling; use a smaller Height on mobile.
  • Privacy policy. Mention Google Maps in your privacy policy, especially without Load on click. See Cookie consent.
Facebook EmbedAnother embed with a click-to-load preview. Cookie consentThe consent banner and its categories. Business & SEOYour address as structured data. FormA contact form next to the map.