Skip to content
Vivd Docs

Google Maps

The Google Maps plugin embeds a map on a page from an embed URL that Google gives you. It is an external embed: the map is an iframe pointing at Google, so the plugin needs no backend and stores no secrets.

What to configure

  • Enable the Google Maps plugin for your website.
  • In Google Maps, choose Share or embed map and copy the embed URL from the iframe snippet.
  • Paste that URL into the plugin config under embedUrl and save.
  • Install the generated iframe snippet where the map should appear in the published site.

Vivd only accepts an embed URL from www.google.com, google.com, or maps.google.com with a /maps/embed path. A general maps.google.com page URL is rejected, so take the URL out of the iframe snippet rather than the browser address bar.

Other config values

  • title: the iframe title, up to 120 characters. Defaults to Google Map.
  • height: the embed height in pixels, between 240 and 960. Defaults to 420.
  • loading: lazy or eager. Defaults to lazy.
  • referrerPolicy: no-referrer-when-downgrade or strict-origin-when-cross-origin.
  1. Confirm the config holds a real embed URL. The generated snippet stays empty without one, and the pre-publish checklist reports that as an error.
  2. Publish and open the page to confirm the map renders at the height you set.
  3. If the published site uses a locked-down Content Security Policy, allow the Google Maps iframe hosts in its frame-src policy.

Good defaults

  • Place the map near the contact or location section, not above the primary call to action.
  • Keep the embed for a location visitors need, rather than as decoration.

Troubleshooting cues

  • If the map area is blank, check that embedUrl is set and that the snippet is on the page.
  • If the map is blocked only on the published domain, check the site’s CSP frame-src.
  • Preview support for this plugin is limited to config validation and the rendered snippet, so verify the real map on the published site.