Embedding a Map with Google Sites

Get A Map Embed Code

It's easy to embed a map created in the Mappedin Map Editor into any web page. Follow the steps below to copy a embed map code snippet.

  1. Log into the Mappedin Map Editor.
  2. Open the map to embed.
  3. Click on the Preview button. Preview Button
  4. Click on the Share button.
  5. If the map is in Draft status, use the drop down to change it to Live.

The Copy Embed button

  1. Click on the Copy Embed button.

The Copy Embed button

The code to embed the map has now been copied to the clipboard.

Embed the Code

Follow the steps below to embed a map as it appears in the Mappedin Viewer into a page on your web site created using Google Sites.

Screenshot demonstrating how to insert an embed on Google Sites

const venue = getVenue()
  1. In the Google Sites website builder, open the desired page to embed the map.
  2. From the Insert menu on the right hand side, select Embed.

Screenshot demonstrating how to insert an embed on Google Sites

  1. Paste the embed code copied from the map editor into the window that appears.

Recommended: Replace height="650" with height="100%" to dynamically scale the map height to fit the available space.

Google Sites embed from the web

  1. Click "Next" and the map should appear in the view. If everything looks correct, press "Insert" to add the map to the page.

Google Sites embed from the web

The map should now appear on the web page similar to the screen shot below.

GoogleSites map embedded

Maps for Good 🤍

© 2024 Mappedin Inc.

All Rights Reserved.

Sign up for developer updates

Get early access to release notes, major version changes, version migration guides, and our developer focused blog posts.

Loading...

For more information

Read the Developer Blog

Explore the Playground

Talk to Sales