A map is especially useful if your offer is tied to a fixed location, for example for a shop, café, office or a practice.
You can either use the integrated map element or embed external services like Google Maps.
🎬 At the end of the article, you'll find our latest video tutorial!
There are three possibilities to add a map to your Onepage page.
Option 1: Onepage element “Map” (OpenStreetMap)
How it works:
Add a blueprint section
Select the element „Map“
Enter your address
If your address is not found, you can add it in OpenStreetMap. As soon as the address is entered, it will also be displayed in Onepage.
Option 2: Embed Google Maps via API
You create the API key directly at Google. Here you can find the official guide from Google.
The guide is very detailed, therefore here again the most important steps in short:
1. Create API key (Google Maps)
Log in to the Google Cloud Console.
Go to “Credentials”.
Click on “Create credentials” → “API key”.
Optional: Restrict API key to secure usage.
Click on “Create”. Your API key will be displayed and can be used in Onepage.
Important: For the map to be displayed in Onepage, a Google Maps API key must be created, the Maps JavaScript API must be activated, and a Google billing account must be set up.
2. Add in Onepage:
Settings → Site settings → Integrations → Google Maps
Alternatively, you can directly insert the Google API key in the section.
Option 3: Integration via Custom Code (starting the Essential plan)
With Custom Code, you can integrate Google Maps or other map services such as Mapbox or Leaflet into your Onepage website.
For this, you need a paid plan (starting from the Essential plan).
You can add the code either:
in a single section (e.g. on a specific page),
or for the entire project / website (in the project settings).
In the video below, you’ll learn how to add Custom Code. You can also find more information in our help center articles.
This method is especially suitable for custom requirements or advanced layouts.
For most use cases, we recommend integration via API or the standard element.
📝 With these three options, you can flexibly integrate a map into your Onepage website, depending on your requirements.
Video Tutorial
For a clearer overview of the process, you can also watch our video tutorial below:
Frequently Asked Questions (FAQ)
Does the map also work on mobile devices?
Does the map also work on mobile devices?
Yes, the Onepage map element and Google Maps automatically adapt to mobile devices. Alternatively, you can further optimize for mobile devices by duplicating sections and creating different views for desktop and mobile. For more on this topic, please check our Help Center.
Can I display multiple locations on one map?
Can I display multiple locations on one map?
With the standard map element, only one location can be displayed. For multiple locations, Google Maps API or custom code would be required.
What are the costs associated with using Google Maps?
What are the costs associated with using Google Maps?
Embedding via API is free in Onepage, however Google may charge costs depending on usage.
Why is my address not showing?
Why is my address not showing?
First check whether the address is correctly entered in OpenStreetMap. If not, you can add it via this link.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂