Skip to main content

Embed Google Maps

Learn how to embed Google Maps into your Studio.Design site and how to update the location shown on an embedded map.

How to add Google Maps

(1) Get the map embed code

  1. Update the embed code with a different address.
    You can get the iframe code by dropping a pin in Google Maps, then going to "Share" → "Embed a map".

  2. Open the location you want to display in Google Maps (either on the website or in the app).

  3. Go to [Share] → [Embed a map] and copy the embed code.

(2) Add a Google Maps embed box in Studio.Design

  1. Open the Add panel from the navigation on the left side of the screen.

  2. Open the [Basic] tab.

  3. In the [Embed] group, select the [Map] embed box and place it on your page.

(3) Set or update the Google Maps location

  1. Click the embed box you added in step (2).

  2. Open the [Embed] tab in the right panel. If the panel is closed, please open the right panel.

  3. Click [Open editor] under [Embed code].

  4. In the editing area on the left side of the [Edit embed code] screen, delete the existing text, paste the link you copied from Google Maps, and click [Save].

  5. If you're editing a site that's already published, update the site. Your changes won't appear on the live site until you update it.

googlemap google map google maps

Did this answer your question?