About PageFly Google Map
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 Element
- Step 1: Click the “Element” button on the left menu and pay attention to the PageFly tab
- Step 2: Select “Google Map” element from the dropdown menu. It’s under the Advanced category.
- Step 3: Drag and drop the desired variant of the Google Map element into the page editor.
The Google Map element comes with a Basic location display and Advanced location display using Google API. To use the Advanced element, you must get an API key from Google Cloud Platform Console.
Note that you can search this element by using the search function instead of finding it in the sidebar.
How To Configure For Google Map Element?
The Google Map element in PageFly comes with various parameters that allow you to customize its appearance and functionality to enhance user experience and conversion rates.
Select the element you’ve added to the page layout and navigate to the General and Styling tabs to see its parameters.
General Settings
In the General tab, you can configure the following main settings:
| Map location: Type in your business’s address for Google Map to display. The map will show the location right away. |  |
| Zoom: Adjust the zoom level of the map to focus more closely on the location or to show a broader area. |  |
| Map Type: Choose the display type of the map. Options include a roadmap graphic or satellite visual.
|
 |
Content Loading:
|
 |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters in this General tab guide.
Styling Settings
The Styling tab allows you to customize the visual aspects of your Google Map element to align with your brand’s design. You can adjust various elements such as font, color, size, spacing, and more to ensure the map integrates seamlessly with your page.
For more detailed information, refer to the Styling tab guide.
Common Cases
Google Map Not Displaying Correctly
Ensure that the address entered in the Map Location field is accurate and complete. If you use the Advanced Map element, verify your Google Maps API key is correctly set up and has the necessary permissions. If the issue persists, try refreshing the page or re-adding the element.
Styling Conflicts with Other Page Elements
Use the Styling tab to adjust the map’s visual settings, such as margins, spacing, and colors, to ensure it aligns with the overall page design. Apply custom CSS if necessary to resolve specific styling conflicts and maintain a cohesive look.
Frequently Asked Questions
1. Is Google Maps API free?
The Google Maps API is free for usages under 200$ per month.
2. Why should you use Google Map element In PageFly?
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.
3. What is the difference between Basic Map and Advanced Map?
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.
