Google Maps Embed
The Google Maps Advanced Element allows you to easily embed a Google Map into your page that is fully responsive and optimized for mobile viewing. You can embed a basic Google Map, or a custom Google Map that you have populated with map pins.
Example Google Map Embed
Types of Google Maps & Embed Codes
While any Google map can be embedded with this Advanced Element, there are two types of maps that we’ll show you how to embed. Follow the instructions below to find the embed code which you’ll need to embed your map.
Locate the Basic Google Map Embed Code
This is a typical Google Map that you create simply by going to www.google.com/maps and searching for an address. To obtain the required embed code, follow these simple steps:
Visit www.google.com/maps
Search for the address you want to center on the map
Click on the Share icon
Select the embed code and copy it. You’ll need it later for creating the Advanced Element.
Locate the Custom Google Map Embed Code
This is a map that you’ve created on your Google My Maps account that contain a list of locations that create pins directly in the embed. For more information creating, editing, and managing your custom maps view Google’s documentation here. To obtain the required embed code, follow these simple steps:
Login to your My Maps account, and select the map you want to embed.
Click on the three vertical dots next to the map name in the top left of the map window.
Click on Embed on my site in the map options list. You’ll need it later for creating the Advanced Element.
Copy the embed code in the Embed this map dialog box that appears.
Adding a Google Map Embed
Place your cursor on an empty line in the Rich Text Editor body:
Click the Add Element button located above the Rich Text Editor buttons:
Click the Google Maps Embed icon in the Advanced Elements selection tool:
Paste the full embed code you located earlier in the Google Maps Embed Code field.
Once you have entered the embed code, click the green Update Element button to insert your map:
After clicking Update Element, you’ll see the map placeholder image in the editor:
Editing an Existing Google Map Embed
To edit an existing Google Map Embed, simply double click on the placeholder for the gallery you want to edit. The Google Map element options will display, and update the embed code as necessary. When you’re finished editing, click the green Update Element button to save your changes.