Google Map element

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

About Google Map elementClick to copy

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 configurationClick to copy

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 mapClick to copy

googlemap

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.
googlemap

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

Advanced mapClick to copy

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.

googlemap

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”.
googlemap

 

 

googlemap

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

Styling configuration

You can check more information about the Styling tab.

Navigate this category

PreviousPrevious article

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Boost Father's Day Sales: Utilize PageFly's templates to create captivating pages that drive results - Discover Now