How to Use PageFly Google Map

So, how to add Google Map to Shopify Page? Let’s check out this detailed guide from PageFly, best updated in 2023.

About PageFly Google MapClick to copy

The Google Map PageFly 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.

> Check out: What is Google Map API?

Learn how to seamlessly integrate Google Maps into your page with PageFly by watching this video tutorial below:

Access PageFly Google Map elementClick to copy

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

ggmap

Basic Map ConfigurationClick to copy

Google Map element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate. There are 2 variations of Google Map element, including: Basic map & Advanced map

Select the element in the layout to see its parameters.

General configurationClick to copy

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

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

Styling configurationClick to copy

You can check more information about the Styling tab here

Advanced Map ConfigurationClick to copy

General configurationClick to copy

SETTINGS
Google API Key: To use the advanced features, you must get an API key from Google Cloud Platform Console, add it to the map via the Google API Key field. google map
  • 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.
google mapThe settings will be like in the Basic map.
Style: There are 5 styles for advanced map styles: Default, Shades Of Grey, Ultra Light, Bright Colors, Subtle Gray Scale. google map
Window Info: Type some information for your audience to know more about the location such as “Our newly opened store”. google map

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

Styling configurationClick to copy

You can check more information about the Styling tab here

Frequently Asked QuestionsClick to copy

Is Google Maps API free?Click to copy

The Google Maps API is free for usages under 200$ per month.

Why using Google Map PageFly?Click to copy

Google Map PageFly allows you to put the map onto your page so visitors can find location easier, which helps to increase sale and conversion rate. It also shows authority and trustworthiness of your page.

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us