Be Found: Maps on Your Website
An interactive map on your contact page is the best way to show customers the way to your shop or office. With the Google Maps Module from Kopage, you can integrate a professional map that directly supports features like zooming and route planning.
1. Adding the Map Element
In Kopage, you can place a map anywhere you can add a new element:
- Click on the plus symbol (+) where the map should appear.
- Select Google Maps from the list of elements.
- Click on the gear icon (Settings) of the new element.
- Simply enter your location under "Address" (e.g., Bahnhofstrasse 1, Zurich) and click "Search" or "Go".
For some time now, Google has required a so-called API Key to display maps on commercial websites. Without this key, the map often appears grayed out or with an error message ("For development purposes only").
2. Entering the Google Maps API Key
To operate the map correctly, you must create a key with Google:
- Visit the Google Maps Platform.
- Create a project and activate the Maps Embed API.
- Set up a payment method (Google offers a monthly free credit that is completely sufficient for most SME websites – so usually no costs are incurred).
- Copy the generated API key.
- Paste the key in Kopage under Settings > SEO & Settings > Google Maps API Key.
3. Privacy & GDPR
Since data is transferred to Google when Google Maps is loaded, you should consider the following:
Use the integrated Kopage cookie consent tool (under Settings > Privacy). This way, the map is only loaded once the visitor has consented, making your website legally compliant.
Alternative: OpenStreetMap
If you want to avoid the effort of the API key, Kopage often offers a module for OpenStreetMap. This is a free open-source alternative that requires no key and works immediately.
Are you having problems creating the API key?
The CURIAWEB Support will be happy to help you with the setup!
Next article: Designing your own contact forms
