WordPress interactive map: what you can build, and what the word leaves out
A WordPress interactive map is two different products wearing one name, and most of the pages ranking for that phrase will not tell you which one they are selling.
One is a map of points. It pans, it zooms, and it carries pins a visitor can click to see a name, a photo, two sentences, a button. Offices, venues, project sites, trip stops, a shop.
The other is a map of regions. States, countries, counties, sales territories: an outline made of shapes, shaded by value, that reacts when a visitor clicks Kansas.
Modern Maps builds the first one. It does not build the second one, and no setting turns it into the second one. If you came here for clickable states, stop reading now and go search for a choropleth or territory map plugin. That is genuinely different software, and pins will not fake it for you.
Everyone still here wants points. The rest of this post is the whole build.
Points or regions
The split that decides whether the rest of this post is for you.
- ✓Pan, zoom, dragStandard map gestures, on desktop and touch.
- ✓Clickable markersA pin opens a popup over the map.
- ✓Popups made of blocksHeading, image, paragraph, button.
- ×Clickable states or countriesShapes are not markers.
- ×Shading by valueChoropleth work needs a data-map plugin.
- ×Territory or sales regionsDifferent product, different search.
Both get called interactive. Only one of them is a map of points.
Which one you need: three questions
Answer these before installing anything.
- Are you plotting points or coloring areas? A point has a latitude and a longitude. An area has a border.
- Does a visitor click a place or a shape? Clicking a pin to get details is a point map. Clicking Ohio is a region map.
- Is there a dataset behind it? If the map has to read a spreadsheet and change color when a number changes, that is data visualization wearing a map costume.
Two answers on the region side means this is not the tool. One answer on the region side usually means points will still do the job, because “show me every location we serve” is a pin problem that people describe in territory language.
What an interactive map means here
Concretely, on the front end, a visitor gets pan, zoom, and markers they can click. In the editor, the block gives you:
- Three presets: Light, Dark, and Standard. Each one re-skins the whole basemap. The preset gallery shows 24 worked examples of what those three become once Pro’s color controls are applied to them.
- Markers, each with a latitude, a longitude, an address label, and a color.
- Popups attached to markers, built from regular blocks.
- Alignment: default content width, wide, or full.
- Height in whatever CSS unit you work in.
- Viewport: auto fit to markers, or fixed to a lat, lng, and zoom you choose.
- Block supports you already know: margin, border color, border width, radius, shadow.
Two things are missing from that list, and their absence is the point. There is no API key field and no billing account to connect. The vector tiles come from the plugin’s own delivery and are drawn in the browser by MapLibre GL JS, which is an argument we have made at length under no API key.
Build it: empty page to published map
Installation and the first map take about a minute and are covered step by step in a 60-second walkthrough, so here is only the part specific to a multi-pin interactive build.
- In the block editor, type
/mapand press return. - Open the block sidebar and set Map Position to Auto (Fit to Markers). With more than one pin, this saves you from hand-tuning a center.
- Open the Markers panel, click Add New Marker, then set its position in the marker’s own Location Settings panel: search an address, or type a latitude and longitude directly.
- Repeat for each location, remembering that the modernmapswp.com download places two markers before it asks for a license key. Give each one a color if you want them to read as categories.
- Set a height, pick an alignment, publish.
The map you see in the editor is the map visitors get. There is no separate preview mode to check.
The popup is where the interaction actually lives
This is the part most guides skip, and it is the part that makes a map feel interactive rather than merely draggable.
A marker popup is not a text field. It is a block container with no template lock and no allowed-blocks restriction, which means it holds anything a page holds. A heading, an image, a paragraph, a button linking to that location’s page, a list of hours, a group with columns inside it. Build it the way you would build a card in the post editor, because it is the same editor.
The popup has its own design controls, separate from the map: background color, gradient, or image, text color, border color, width, and radius, padding, block gap, and shadow.
Two practical notes. Keep popups short, because a popup that is tall on a laptop covers most of a phone screen. And set the popup background deliberately: the front end reads the computed background and matches the little pointer tip to it, so a popup with no background set will look unfinished at the tip.
Viewport, height, and alignment
Map Position, the control inside the Viewport Settings panel, has two modes. Auto fits the view to your markers, which is what you want for a map of several places. Fixed pins the map to a latitude, longitude, and zoom level you set, which is what you want when a specific framing matters more than fitting every pin, for example a single office where the useful context is the freeway exit next to it.
The zoom slider runs 1 to 20 in tenths, and it behaves differently per mode. In fixed mode it is the zoom. In auto mode it is a ceiling: the fit will not zoom in past it. That is the setting to reach for when one map opens absurdly close because a client has exactly one location.
Height takes any CSS unit. A viewport-relative height looks great on a desktop and can leave a phone visitor scrolling through a map they cannot escape, so check the small screen before shipping.
Alignment is the usual three. Full width suits a map that acts as a section break; default content width suits a map that acts as a figure inside an argument.
What this map does not do
Directly, so nobody wastes an afternoon:
- No clickable regions, states, counties, or SVG territory maps. No choropleths or heatmaps.
- No front-end filtering, category toggles, or search box. A visitor pans, zooms, and clicks markers.
- No marker clustering, and no store locator or “find nearest” feature.
- No GeoJSON, KML, or CSV import. Markers are placed in the editor.
- No directions or routing.
- No custom marker icons or images. Marker styling is a color, nothing more.
- No shortcodes and no widgets. Three blocks, and that is the whole surface.
If you need a store locator or a territory map, buy the tool built for it. For a wider survey of the options, including embedding Google’s own map, see how to add a map in WordPress.
Three things that trip people up
A visitor without WebGL gets an empty box. The map renders through WebGL, and there is currently no static fallback, so a hardened browser or a device with WebGL disabled shows a blank container rather than a message. Worth knowing before you make a map the only way to find your address. Keep the address in text nearby.
Marker limits depend on which build you installed. The download from modernmapswp.com places two markers before it asks for a license key. Modern Maps Lite on WordPress.org has no marker limit at all and never has. One useful detail on the self-hosted build: only markers added during the current editing session get trimmed, so a post authored under a license keeps every marker when someone without one opens it later.
Address search runs in the editor only, and it fails quietly. Geocoding happens while you author, never on the front end. It also has no error message, so a search that returns nothing usually means the address needs rephrasing. Try the street and city without the suite number, or drop a coordinate pair in directly.
Try it
Download Modern Maps (free) and build the map on a draft page before you commit to it on a live one.
Modern Maps Pro adds three things to that download, and it is worth being precise about which three: markers past the second, advanced OKLCH color controls for the basemap, and theme palette and marker colors that persist instead of resetting when you change them. It adds no extra presets.
If you would rather install from the dashboard, search the plugin directory for Modern Maps Lite. Same map, no marker cap, and no in-plugin upgrade path, so moving to Pro later means switching to the site download.