Google Map element

This element is available on all PageFly plans

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. 

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.ATTRIBUTES This is a parameter that all elements have. You can read more here.
3. VISIBILITY This is a parameter that all elements have. You can read more here.
4. ANIMATION This is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. SPACING You can read about the SPACING parameter here.
2. BORDER You can read about the BORDER parameter here.
3. DISPLAY You can read about the DISPLAY parameter here.
4. CUSTOM CSS You 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.ATTRIBUTES This is a parameter that all elements have. You can read more here.
3. VISIBILITY This is a parameter that all elements have. You can read more here.
4. ANIMATION This is a parameter that all elements have. You can read more here.
Styling tab’s parameters
1. SPACING You can read about the SPACING parameter here.
2. BORDER You can read about the BORDER parameter here.
3. DISPLAY You can read about the DISPLAY parameter here.
4. CUSTOM CSS You can read about the CUSTOM CSS parameter here.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

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

I got it!
Languages