PageFly - Google map element

455 views PageFly 0

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 on to 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.

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

pagefly google map 1

The Google map element comes with a Basic and Advanced map. Drag a variation to the layout and see how it can be configured.

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 layout to see its parameters.

Basic map

pagefly google map 2

General’s tab parameter

The parameters in the General tab for the Google map element include:

1. 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 the map.
  • Map Type: Choose to display the map in roadmap graphic or satellite visual

2. ATTRIBUTES; VISIBILITY; ANIMATION: these are the group of 3 elements that all elements have. You can read more here.

Styling tab’s parameter

The parameters in the Styling tab for the Google map element include:

  1. SPACING
  2. BORDER
  3. DISPLAY
  4. CUSTOM CSS

You can read about all these parameters here.

Advanced map

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

pagefly google map 3

General’s tab parameter

The parameters in the General tab for the Google map element include:

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

2. ATTRIBUTES; VISIBILITY; ANIMATION: these are the group of 3 elements that all elements have. You can read more here.

Styling tab’s parameter

The parameters in the Styling tab for the Google map element include:

  1. SPACING
  2. BORDER
  3. DISPLAY
  4. CUSTOM CSS

You can read about all these parameters here.

Was this helpful?