How to add a map in WordPress: every method, and how to choose one
You want a map on your site. You know roughly where it goes (the contact page, the about page, a single post). You can already picture it. The remaining question is how it actually gets there.
There are four realistic ways to do it in 2026. Each is right in some contexts and wrong in others. None of them is “the answer,” and any post telling you there is one is selling you something.
The short answer
If you already know your situation, take the row that matches and skip to that method.
Which method matches your map?
The question is not which method is best. It is which one your map actually needs.
Most sites land on method 3 and reach for method 2.
Method 1: the Google Maps iframe embed
Open Google Maps, find your location, click Share, click Embed a map, and copy the iframe tag. Paste it into a Custom HTML block on your page. The map appears. Total time, about five minutes.
When this is fine. One location, styling you do not care about, a page with modest traffic. A small contact page for a local business is the textbook case. Nothing to install, nothing to configure, no account to create.
When this is not fine. As soon as you care how the map looks next to the rest of your site. The default embed is the same flat blue-and-beige palette every other site uses. It will not match your theme and it will not respond to your accent color.
There is also what it cannot do. The iframe shows one location with Google’s default red pin, and that is the entire interaction model. You cannot drop a second pin. You cannot change the marker. You cannot attach a popup with your own content, an image, or a button. If a visitor clicks the pin, they leave your site for Google Maps. It is a window into Google’s map, not a map on your page.
Performance is the other cost. An iframe embed pulls the whole Google Maps Platform stack into your page: scripts, fonts, tile imagery, analytics, and a substantial bundle of JavaScript that runs whether the visitor scrolls to the map or not. On a quiet contact page this is mostly tolerable. On a homepage with three other things above the fold, it is weight the visitor feels before the page settles.
One thing worth doing if you use this method: the embed code Google gives you is a fixed-size iframe, so it will not resize on a phone. Wrap it, and add loading="lazy" so it does not compete with the rest of the page for bandwidth.
.map-embed { position: relative; aspect-ratio: 16 / 9; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
The honest one-liner. Free, instant, single-pin, generic-looking, heavy. Use it when none of those are problems.
Full walkthrough: embedding a Google Map in WordPress.
Method 2: a plugin that uses your Google Maps API key
Install one of the many plugins that wrap the Google Maps JavaScript API. Then go to the Google Cloud Console, create a project, enable the APIs you need, generate a key, restrict it to your domain, and paste it into the plugin’s settings. Set a billing alert while you are there, because if the map gets popular the bill is yours.
When this is right. When your map genuinely depends on Google’s data: business listings with reviews, Street View, live traffic, routing. When you already manage Google Cloud resources and the workflow is familiar. When you want one specific Google feature and nothing else will do.
What it costs. The plugin is often free or cheap. What costs you is the Cloud Console setup, the ongoing operational concern of a key (rotate it, scope it, never commit it to a public repo), and the Google Maps Platform bill, which is metered per request. There is a free monthly allotment. Most plugins phrase this as “you probably won’t hit it” rather than telling you what happens if you do.
There is a usability cost nobody warns you about. The plugin’s admin screen is usually a thin wrapper around the API’s options rather than its own simplified interface, so you end up reading settings named “marker clusterer threshold” and “info window pixel offset.” If you wanted to think about info window pixel offsets, you probably would not be looking for a WordPress plugin.
The honest one-liner. Powerful, configurable, and substantially more work than most sites need.
If this is your method, the part worth getting right is the key itself: how to set up and restrict a Google Maps API key. An unrestricted key on a public page is somebody else’s free API quota.
Method 3: a self-contained plugin with no API key
Install a plugin that ships its own map stack: tiles, styling, search, and the editor experience. There is no Cloud Console step and no key. The map renders the moment you add the block.
This is the category Modern Maps is in, and a handful of other plugins do the same thing in different ways.
The steps, in full, because this is the method most people reading this should use:
- Install and activate the plugin.
- Edit the page and add the map block. Typing
/mapin a new paragraph is fastest. - Add a marker, then search an address in its Location Settings panel. The marker moves to the result.
- Set the height and the alignment. Both are ordinary block controls.
- Publish.
One thing worth knowing, because it is the step people get stuck on: the address search that places a pin belongs to the marker, not to the map. The map block has its own search labelled Search Center, and it only appears once you switch the viewport from “Auto (fit to markers)” to “Fixed (manual).” That one moves the camera and does not create a pin. If you searched and nothing appeared, that is almost certainly why.
gold marker with a popup. Carries its own figcaption (“Fig. 1 · Slate gray, framed on Camelback Mountain · ◉ 33.5145° N, 111.9617° W”), so the conversion must not add a second one. –>
When this is right. When the map is part of how the page looks rather than a functional appendage bolted on. When you want it to inherit your theme’s colors and your border radius. When the time you have for “add a map” is closer to a minute than an afternoon.
The tradeoff. A self-contained plugin is opinionated. It will not do every Google Maps feature, because doing every Google Maps feature requires the Google Maps Platform. If your use case is a store locator with thousands of pins, distance search, category filters, and lead capture, this is the wrong category.
The honest one-liner. Simple, design-aware, lower ceiling than a Google API plugin. The category most sites should use, and the one most sites overshoot.
If you want the sixty-second version with screenshots, that is your first map, start to finish. If you want to see what the styling actually buys you, the preset gallery has twenty-four of them.
Method 4: build it yourself with a mapping library
Load a JavaScript map library from your theme or a custom block, point it at a tile source, and render the map yourself. MapLibre GL is the common open-source choice, and it is what Modern Maps uses internally.
When this is right. When your data is unusual enough that no plugin models it, when you need an interaction nothing off the shelf provides, or when you already have a front-end build and a map is one more component in it.
What you take on. You now maintain it. Tile hosting, style upkeep, browser support, and every future WordPress change are yours. This is a reasonable choice for a developer with a specific requirement and a bad one for a site owner who just wants a map on the contact page.
The honest one-liner. Total control, total ownership. Do not pick it by default.
What none of these do out of the box
Worth saying plainly so you do not spend an afternoon looking for a setting that is not there. Marker clustering, store locators, driving directions and routing, and bulk import from CSV, GeoJSON, or KML are not Modern Maps features, and most self-contained plugins in this category do not ship them either.
If you need those, the product category you want is a dedicated store locator plugin. They are built for exactly that job, they usually charge for it, and they are the right answer when your map is really a database with a map on the front.
When the map does not appear
Three failure modes cover almost everything.
The container has no height. A map in a container with no height collapses to nothing and renders as blank space. This is the usual cause with method 4, where the height is yours to set, and with any plugin that leaves it to your theme. It is not the cause with Modern Maps, which always writes an explicit height onto the wrapper and falls back to 300px if you never touch the control.
The API key is restricted to the wrong domain. Method 2 only. A key restricted to example.com will not work on www.example.com or on a staging domain. The browser console will say so explicitly.
The visitor’s browser cannot run WebGL. Vector maps need it. Modern Maps does not currently ship a fallback image, so a visitor without WebGL gets an empty container rather than a degraded map. This is rare on current browsers and not rare on locked-down corporate machines.
Where to start if you have no strong opinion
Install Modern Maps, add the block, search a location, publish. It takes about a minute and commits you to nothing. If it works for your site, you have your answer. If it does not, the other three methods are still there.
Both builds ship three style presets (Light, Dark, Standard) and the full block-editor experience. They differ in one place. Modern Maps Lite, from the WordPress.org directory, has no marker limit. The build linked above has a license slot in it and stops at two markers until you add a key. A Modern Maps Pro license lifts that cap and adds advanced LCH color controls plus theme palette colors that persist, and it activates in place with no reinstall.
If you want the wider view of what else is out there, the whole category is broken down here.
Four methods. None is universally right. Pick the one that matches the map your site actually needs.