How to add interactive Google Maps to a WordPress site

Decide whether you need one location, a route, or a directory-style map with several markers. A single business address is usually fine with Google Maps’ built-in embedding. Multiple locations, marker filters, clustering, custom icons or searchable listings usually need a plugin or custom development.

Do not use a screenshot if visitors need to zoom, pan, get directions or open the location in Google Maps.

On a computer, open Google Maps and search for the place or route. Select Share, choose Embed a map, select a size, then copy the HTML. Google provides this iframe for a location or directions view. The standard sharing route is the quickest manual method, but it gives you limited control over markers, styling and map data.

Edit the WordPress page or post where the map should appear. Add a Custom HTML block, paste the iframe code, save the page and preview it. The block accepts HTML such as the <iframe> supplied by Google.

If WordPress removes the iframe when you save, your user role or site configuration may not allow unfiltered HTML. Ask an administrator to add it, or use a map plugin instead.

Open the published page on a phone and desktop. Make sure the map is large enough to use, the address is correct, the zoom level is sensible and the directions link works. Google’s embed documentation says an embedded map must be at least 200 pixels wide and 200 pixels high.

If the map is too tall or too wide, edit the iframe dimensions or place it inside a responsive container provided by your theme or page builder.

If you need custom markers, address search, live directions, multiple map controls or data loaded from your directory, use the relevant Google Maps Platform API through a plugin or custom code. Create a Google Cloud project, enable the APIs the feature requires, create an API key and restrict that key to the APIs and websites that use it.

This is where maps often fail on a Friday: billing is not enabled, the wrong API is enabled, the key is restricted to the wrong referrer, or the key is missing. A dark map or a “for development purposes only” message usually points to an API key or billing problem.

The fast route for a location-rich WordPress site is WP MAPS PRO. Install and activate it, connect the plugin to your Google Maps API key, then use its map builder to create a map and add locations. Insert the finished map using the plugin’s available block, shortcode or page-builder option.

It fits directory and listing sites because it supports markers, directions, filters, routes, map layers, multiple maps and clustering. You still need to configure the Google API correctly; a plugin does not remove Google’s key, API or billing requirements.