How to add interactive maps to a WordPress site

Decide whether you need a single location, a route, a collection of places, or a data-rich map with filters and pop-ups. A single location or route can usually be embedded without writing code. Multiple layers, custom shapes, searchable markers and data loaded from a spreadsheet or GeoJSON file usually need custom JavaScript or a map plugin.

Also decide whether visitors need directions, street view, filtering, clustering, accessible text alternatives or links to separate location pages. These choices affect which map service and WordPress method you should use.

Build the map in Google Maps, Google My Maps or another mapping service. Add the locations, labels, routes and layers before embedding it. If you use the Google Maps Embed API rather than a standard share embed, create an API key and restrict it to your website’s domain. Google documents map modes for places, directions, street view, views and searches, and requires an API key for the Embed API.

Keep the map focused. A crowded map is difficult to use on a phone, and long marker descriptions often become awkward inside small pop-ups.

Edit the WordPress page and insert a Custom HTML block where the map should appear. Paste the iframe code supplied by the map service, then set a sensible height and make the width responsive, such as width=100%. The WordPress editor supports Custom HTML for embed code, but it can remove iframe or script markup when the user does not have the required unfiltered HTML permission.

Publish or preview the page and check the front end, not only the editor preview. If the iframe disappears after saving, ask an administrator to add it, use a controlled embed block or install a map plugin instead of repeatedly pasting code that WordPress sanitises.

If you need your own markers, shapes, pop-ups or GeoJSON data, load a mapping library and your map code through a child theme or custom plugin. WordPress recommends enqueueing JavaScript with wp_enqueue_script(), normally from the wp_enqueue_scripts action, rather than placing script tags directly in page content.

Your script then creates the map, reads the location data, adds layers and connects marker clicks to pop-ups or filters. This route gives you control, but you must maintain the library, handle API keys, check licensing and fix conflicts when the theme, page builder or another plugin changes the page markup.

Place the map inside a container that can shrink with the page, use a deliberate height on small screens and avoid relying on a fixed desktop width. Test scrolling, zooming, marker taps and pop-ups on a phone. Google recommends making embedded maps large enough to interact with comfortably and does not support them below 200 pixels in either dimension.

A common failure is building separate desktop and mobile containers and accidentally loading duplicate maps or shortcodes. Page-builder layouts can also hide the map in one breakpoint while showing it in another, so inspect the responsive settings before changing the map code.

Check the map while logged out, on a phone, with keyboard navigation and with browser privacy features enabled. Confirm that markers open, links work, the map does not cover nearby content and the page still loads if the external map service is unavailable.

Give the map a useful heading and provide the important locations as text elsewhere on the page. If an API map is blank, check the browser console, API-key restrictions, billing or quota notices, referrer policy and whether a security or consent plugin is blocking the external request.

For many markers, filters, pop-ups, SVG or GeoJSON layers, use MapSVG. It provides an editor for interactive maps and supports SVG, GeoJSON and Google Maps data, so it avoids much of the custom JavaScript work while keeping the map manageable in WordPress.