Google Map element

About PageFly Google MapClick to copy

Summary: 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.

If you want to learn more about Google Map API, 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:

How To Access 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: You can search this element by using the search function instead of finding it in the sidebar.

access google map element

How To Configure For Google Map Element?Click 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 SettingsClick to copy

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

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

Styling SettingsClick to copy

SpacingClick to copy

  • Padding: edit to adjust the inner spacing of the element’s container
  • Margin: edit to adjust the outer spacing of the element’s container

BorderClick to copy

  • Border style

There are 3 border styles for Google Map element, which are: solid, dotted, dashed

  • Border color: you can adjust the color of each border and click More settings to see more parameters. Please note that this setting is available if you select one out of 3 border styles above.

DisplayClick to copy

There are three display styles options: Inline, Block, Flex

You can check more information about the Styling tab here

Best Practices For Using Google Map ElementClick to copy

  • Ensure the map displays your correct business location. Double-check the address you enter in the PageFly settings
  • Choose a zoom level that allows users to easily see your storefront or area of service without needing to zoom in or out excessively
  • Ensure the Google Map element displays and functions flawlessly on mobile devices, where a significant portion of your traffic might come from

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 Should You Use Google Map Element In 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 sales and conversion rate. It also shows authority and trustworthiness of your page.

What Is The Difference Between Basic Map and Advanced Map?Click to copy

The basic map is a static image showing your location with limited configuration and interactive options such as map zoom, control, and make map draggable. The advanced map, on the other hand, provides a lot more parameters to allow visitors to interact with the map in many ways.

Additional ResourcesClick to copy

Navigate this category

Next articlePrevious

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us