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 聽and聽searching for an address. To obtain the required embed code, follow these simple steps:

Visit

Search for the address you want to center on the map
Image showing how to search for a location in Google maps

Click on the聽Share icon
Image showing the share button in Google Maps

Select the embed code and聽copy it. You’ll need it later for creating the Advanced Element.
Image showing the location of the embed code.

Locate the Custom Google Map Embed Code

This is a map that you’ve created on your account that contain a list of locations that聽create pins directly in the embed. For more information creating, editing, and managing your custom maps . To obtain the required embed code, follow these simple steps:

Login to your My Maps account, and select the map you want to embed.

Image showing the Google MyMaps Screen

 

Click on the聽three vertical聽dots next to the map name in the top left of the map window.

Image showing the location of map options

 

Click on聽Embed on my site in the map options list. You’ll need it later for creating the Advanced Element.

Image showing the location of the embed option

 

颁辞辫测听the embed code in the聽Embed this map dialog box that appears.

Image showing the Google map embed code

 

Adding a Google Map Embed

Place your cursor on an empty line in the Rich Text Editor body:

Image showing the empty line required to embed a Google Map

 

Click the Add Element button located above the Rich Text Editor buttons:

Image showing the add element button

 

Click the Google Maps聽Embed icon in the Advanced Elements selection tool:

Image showing the location of the Google Maps embed button

 

Paste聽the full embed code you located earlier in the Google Maps Embed Code field.

Image showing the embed code entry field

 

Once you have entered the embed code, click the green Update Element button to insert your map:

 

After clicking Update Element, you鈥檒l see the map placeholder image in the editor:

Image showing the Google Maps embed placeholder

 

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鈥檙e finished editing, click the green Update Element button to save your changes.