Maps Editor
The Maps management allows you to integrate interactive maps into your app. You can configure different map providers, customize the display and set up GDPR-compliant consent dialogs.
Overview
Section titled “Overview”The Maps module offers:
- Multiple Map Providers: OpenStreetMap (free), Google Maps, MapTiler
- Marker Clustering: Nearby markers are automatically grouped
- GDPR Compliance: Consent dialog before loading the map
- Flexible Integration: As standalone page or in other modules
Who can edit the Maps settings?
Section titled “Who can edit the Maps settings?”| Role | Access |
|---|---|
| Owner | Yes |
| Administrator | Yes |
| Moderator | No |
| Editor | No |
Open Maps Settings
Section titled “Open Maps Settings”- Open Edit Mode (long press on the version number in settings)
- Go to Modules > Maps
- Tap on Open Maps Settings
The Maps Editor is divided into four tabs:
- Provider - Activate and configure map providers
- Display - Set zoom, position and clustering
- Privacy - Configure GDPR consent
- Controls - Show/hide control elements
Tab: Provider
Section titled “Tab: Provider”Here you choose which map providers should be available in your app.
Default Provider
Section titled “Default Provider”| Setting | Description |
|---|---|
| Default Provider | The map provider that is used by default |
Available Providers
Section titled “Available Providers”Recommended for Getting Started
| Property | Details |
|---|---|
| Cost | Free |
| API Key | Not required |
| Privacy | Servers in Europe, privacy-friendly |
| Features | Basic map functions, marker clustering |
OpenStreetMap is open source and requires no registration or API keys. Ideal if you want to start quickly.
High-Quality Maps
| Property | Details |
|---|---|
| Cost | Free quota, then paid |
| API Key | Required |
| Privacy | US servers, consent required |
| Features | Detailed maps, Street View |
Google Maps offers high-quality map display, but requires a Google Cloud account and an API key.
Stylish Designs
| Property | Details |
|---|---|
| Cost | Free version available |
| API Key | Required |
| Privacy | EU servers available |
| Features | Many map styles, fast loading times |
MapTiler offers modern map styles and EU-based servers. Free version is sufficient for most apps.
Activate Provider
Section titled “Activate Provider”- Open the Provider tab
- Activate the desired providers with the toggle switch
- Select a Default Provider
- Tap Save
User Options
Section titled “User Options”| Setting | Description |
|---|---|
| Users can switch provider | If activated, users see a button to switch between activated providers |
Set Up API Keys
Section titled “Set Up API Keys”Google Maps and MapTiler require API keys. These are stored securely in Cloud Functions.
- Open the Provider tab
- Scroll to the API Keys section
- Tap on Manage API Keys
- The setup wizard guides you through the setup
Create Google Maps API Key
Section titled “Create Google Maps API Key”- Open the Google Cloud Console
- Create a new project or select an existing one
- Activate Maps JavaScript API and Maps Static API
- Go to Credentials > Create Credentials > API Key
- Copy the generated key (starts with “AIza…”)
- Recommended: Restrict the key to your app
- Enter the key in the BLOCQ setup wizard
Create MapTiler API Key
Section titled “Create MapTiler API Key”- Open cloud.maptiler.com
- Create a free account or sign in
- Go to Account > API keys
- Create a new key with a name for your app
- Copy the key
- Enter it in the BLOCQ setup wizard
Tab: Display
Section titled “Tab: Display”Here you customize the map display and behavior.
Zoom Settings
Section titled “Zoom Settings”| Setting | Description | Default |
|---|---|---|
| Default Zoom | Zoom level when opening the map | 13 |
| Minimum Zoom | How far you can zoom out | 3 |
| Maximum Zoom | How far you can zoom in | 18 |
Default Position
Section titled “Default Position”The position displayed when opening the map:
| Setting | Description |
|---|---|
| Default Latitude | Latitude (e.g. 52.52 for Berlin) |
| Default Longitude | Longitude (e.g. 13.405 for Berlin) |
| Select on Map | Opens a map view for visual selection |
Select Position via Map
Section titled “Select Position via Map”- Tap on Select on Map
- Use the search field to search for an address
- Or tap directly on the desired position
- The coordinates are automatically adopted
- Confirm with Confirm
Marker Clustering
Section titled “Marker Clustering”Clustering groups nearby markers:
| Setting | Description | Default |
|---|---|---|
| Marker Clustering | Activates/deactivates clustering | On |
| Cluster Radius | Distance in pixels for grouping | 80 px |
| Minimum Markers for Cluster | From how many markers grouping occurs | 2 |
| Animate Cluster | Smooth animations when zooming | On |
Marker Settings
Section titled “Marker Settings”| Setting | Description | Default |
|---|---|---|
| Marker Size | Size of marker icons in pixels | 40 px |
| Use Custom Markers | Theme-based markers instead of standard pins | On |
Tab: Privacy
Section titled “Tab: Privacy”Here you configure GDPR-compliant consent management.
Why is this Important?
Section titled “Why is this Important?”Map services transmit data to external servers (e.g., IP addresses). According to GDPR, the user must consent before the map is loaded.
Consent Settings
Section titled “Consent Settings”| Setting | Description | Recommendation |
|---|---|---|
| Consent Required | Shows consent dialog before map loading | On |
| Remember Consent | Saves the decision for future visits | On |
| Show Privacy Link | Shows link to the provider’s privacy policy | On |
How Users See It
Section titled “How Users See It”- The user opens a page with map
- Instead of the map, they see a placeholder with info text
- They can tap on Give Consent
- A dialog explains which data is transmitted
- They can choose Accept or Decline
- Upon acceptance, the map is loaded
Consent Text
Section titled “Consent Text”The consent text is multilingual and explains to the user:
- Which map provider is used
- That the IP address is transmitted
- How the data is processed
Tab: Controls
Section titled “Tab: Controls”Here you determine which control elements are displayed on the map.
Control Elements
Section titled “Control Elements”| Element | Description | Default |
|---|---|---|
| Zoom Buttons | Plus/minus buttons for zooming | On |
| Compass | Shows north direction | On |
| Location Button | Button to navigate to own location | Off |
Planned Features
Section titled “Planned Features”The following functions are in development and will be available in a future update:
- Fullscreen button
- Scale display
- Gesture settings (zoom via pinch, rotate map)
Maps in the App
Section titled “Maps in the App”As Standalone Page
Section titled “As Standalone Page”The map can be displayed as a separate page in the navigation. You activate this in the module setup.
In Other Modules
Section titled “In Other Modules”Maps can be integrated into other modules, e.g.:
- Events: Event location on map
- Contact Pages: Directions to the office
- Real Estate/Locations: Location on the map
Frequently Asked Questions
Section titled “Frequently Asked Questions”Which map provider should I choose?
Section titled “Which map provider should I choose?”- OpenStreetMap: Ideal for getting started, free, no API key needed
- Google Maps: Best map quality, but paid with high traffic
- MapTiler: Good compromise, modern designs, EU servers
Are there costs with Google Maps?
Section titled “Are there costs with Google Maps?”Google Maps offers a monthly free quota. For most apps this is sufficient. With very high traffic, costs may occur - you can see these in the Google Cloud Console.
Do I have to activate GDPR consent?
Section titled “Do I have to activate GDPR consent?”Yes, if you have users from the EU. Map services transmit user data (IP addresses) to external servers. Without consent, this is a GDPR violation.
Can users add markers?
Section titled “Can users add markers?”That depends on the module. In the standard map view, only admins can add markers. Other modules (e.g., events) can have their own marker logic.
Why don’t I see a location button?
Section titled “Why don’t I see a location button?”The location button requires location permissions from the user. If these were denied, the button doesn’t work. Additionally, it currently only works with Google Maps.
What happens if a user declines consent?
Section titled “What happens if a user declines consent?”The user continues to see the placeholder instead of the map. They can tap “Give Consent” again at any time to see the dialog again.