Markers and clustering
Markers are clickable pins on the map. Each marker belongs to a Database object that has a Location field.
Where markers can be placed depends on the map type:
- Geo-calibrated SVG maps and Google Maps — markers use lat/lng coordinates. You can enter an address (MapSVG geocodes it) or click on the map to set coordinates.
- Uncalibrated SVG maps — markers use x/y coordinates relative to the SVG canvas. Add them by clicking on the map; address search and lat/lng entry are not available on these maps.
See SVG maps for calibrated vs uncalibrated maps.
When to use
- Store locators, events, offices, any point data
- Combine with Directory and Filters for a list + map UI
Prerequisites
- Objects with a Location field (from any data source)
- For address geocoding or Google Maps: Google API keys
Add markers
Open Menu › Database › List, add or edit an object, and set its location in the Location field. There are two ways to place a marker:
Enter an address
Type an address in the Location field and pick a result from the drop-down. MapSVG sends the address to the Geocoding API and stores lat/lng coordinates.
Works on geo-calibrated SVG maps and Google Maps. Requires Google API keys.
Click on the map
Click anywhere on the map preview in the Location field to place the marker.
- On calibrated maps and Google Maps, the click sets lat/lng coordinates.
- On uncalibrated SVG maps, the click sets x/y coordinates on the SVG canvas — this is the only way to add markers on those maps.
Move a marker
After a marker is placed:
- Click anywhere else on the map preview to move it to that spot
- Drag and drop the marker pin on the map preview
Objects with a Location appear as markers on the front-end map.
Markers from data sources
Markers can come from any data source connected to the map — not only the built-in Database.
| Source | How locations are added |
|---|---|
| MapSVG Database | Seamless and easiest — add objects in Database › List and set the Location field directly in the map editor (address or click on the map). |
| WP Post data source | Each post gets a MapSVG metabox on the post edit screen with an interactive map and address search field. Location syncs both ways between the post and MapSVG. |
| CSV file / Google Sheets | Import rows with a Location column (address or lat,lng). Optional geocoding during import. |
| API endpoint | Your API returns location data in its own format. Add Request and Response middleware under Menu › JavaScript to convert API address/coordinate fields into MapSVG's location object (geoPoint, address.formatted, etc.). |
See Data sources overview for connecting a source to your map.
Marker click and hover
Configure behavior in Actions:
- Marker click — details, popover, zoom, go to link, add ID to URL
- Marker mouseover — tooltip
- Marker touch — popover on touch devices
Templates: DB Object details / popover / tooltip under Templates.
Clustering
When many markers overlap, enable clustering so nearby markers group into numbered clusters.
Settings
Menu › Settings:
| Option | Description |
|---|---|
| Markers clustering | Group markers into clusters with numbers. |
| Markers clustering max. zoom | Always unfold clusters after this zoom level (0–22). |
Colors
Menu › Colors › Marker clusters — background, borders, text, and hover variants for cluster bubbles.