Google Map element

In this article, you’ll learn about the Google Map element and how to use it.

About Google Map element

The Google Map element allows you to put the map directly from Google API onto your page so your visitor can find your location with ease to help to increase your conversion rate. You can use the Google Map element to display any physical location of your choice.

Access the Google Map element

Step 1: Click on the Plus icon which is the Add element function

Step 2: Click on the Google Map element in the dropdown menu

Step 3: Drag and drop the element you want into the page editor and then start using it.

The Google Map element comes with a Basic and Advanced map.

Note that you can search this element by using the search function instead of finding it in the sidebar.

Google Map element configuration

Google Map element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.

Select the element in the layout to see its parameters.

Basic map

The parameters in the General and Styling tabs are specific for this element. 

General configuration

CONTENT
Location: Type in your business’s address for Google Map to display. The map will show the location right away. Zoom: Choose to zoom in on the map. Map Type: Choose to display the map in a roadmap graphic or satellite visual.

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.

Advanced map

Styling configuration

You can check more information about the Styling tab.

Advanced map

In case you’ve chosen to use the advanced map, as informed, you need to get the Google Map API key and add it to the map via the Google API Key field.

The parameters in the General and Styling tabs are specific for this element. Read about them in this article.

General configuration

SETTINGS

Google API Key: To use the advanced features, you must get an API key from Google Cloud Platform Console. Address: Type in your business’s address for Google Map to display. The map will show the address right away. Zoom: Choose to zoom on the map. Control: Turn on to show zoom in (+) and zoom out (-) button Draggable: Turn on to enable users to move the mouse and drag the map to the preferred location on the map. Map Type: Choose to display the map in a roadmap graphic or satellite visual. Style: There are 5 styles for advanced map styles: Default, Shades Of Grey, Ultra Light, Bright Colors, Subtle Gray Scale. Window Info: Type some information for your audience to know more about the location such as “Our newly opened store”.

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters.

Styling configuration

You can check more information about the Styling tab.