PageFly - Google map element

530 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

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

General tab’s parameters
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.ATTRIBUTESThis is a parameter that all elements have. You can read more here.
3. VISIBILITYThis is a parameter that all elements have. You can read more here.
4. ANIMATIONThis is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. SPACINGYou can read about the SPACING parameter here.
2. BORDERYou can read about the BORDER parameter here.
3. DISPLAYYou can read about the DISPLAY parameter here.
4. CUSTOM CSSYou can read about the CUSTOM CSS parameter 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

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

General tab’s parameters
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.ATTRIBUTESThis is a parameter that all elements have. You can read more here.
3. VISIBILITYThis is a parameter that all elements have. You can read more here.
4. ANIMATIONThis is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. SPACINGYou can read about the SPACING parameter here.
2. BORDERYou can read about the BORDER parameter here.
3. DISPLAYYou can read about the DISPLAY parameter here.
4. CUSTOM CSSYou can read about the CUSTOM CSS parameter here.

Was this helpful?