Google map
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
The 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
Learn how to seamlessly integrate Google Maps into your page with PageFly by watching this video tutorial below:
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.
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.
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:
- Lazy Loading: Content only loads when it’s about to appear on the screen, helping save data and making the page load faster at the start.
- Standard Loading: Everything on the page loads immediately after the user opens it, ensuring all content is visible from the start.
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.
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.
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.
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.
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters in this .
For more detailed information, refer to the .
