Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add an Interactive Map in WordPress

Do you want to add an interactive map in WordPress? Interactive maps allow your users to discover routes, journeys, and itineraries by clicking on markers in the map or moving the mouse around. In this article, we will show you how to easily add an interactive map in WordPress.

Adding an interactive map in WordPress

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Method 1: Adding an Interactive Map in WordPress using Google My Maps

This method is simpler and doesn’t require you to install a plugin on your WordPress site.

First, you need to visit Google My Maps website and click on the ‘Create a new map’ button.

Create a new map

This will bring you to the edit map page. On this screen, you can create your map by selecting a base map, adding points of interest, layers, and more.

Editing map

Using the toolbar at the top, you can draw lines on the map, add routes, use rulers, and select items.

Using the map toolbar

All your map items are saved in layers to the left. You can add, edit, rename, or even delete layers. You can also click on any item in your layer to add description, change title, or add photos / videos.

Add descriptions

Once you are done editing your map, you need to make it public so that you can use it on your website. You can do this by clicking on the share button in the edit panel.

Sharing your interactive map

This will bring up the sharing center where you need to click on ‘Change’ under ‘Who has access’ section.

Sharing settings

Next, you need to select ‘On – Public on the web’ and then click on the save button.

Making your map public

After that click on ‘Done’ to close sharing center.

On the edit panel click on the menu icon next to map name and then select ‘Embed on my site’.

Embed map on site

You will now see the embed code that you need to copy.

Embed code

Next, head over to the post or page where you want to add your interactive map in WordPress. On the post edit screen, you need to switch to the text editor and paste the map embed code you copied earlier.

Paste your interactive map code in WordPress

You can now save your changes and preview your post to see your interactive map in action.

Map preview

Method 2: Add an Interactive Map in WordPress Using Plugin

While you can create and add interactive maps using Google Maps, it still lacks certain features and is limited to Google Maps.

If you want to use Open Street Maps, Bing, or other mapping services, then this method is for you.

First thing you need to do is install and activate the Maps Marker Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Maps Marker Pro page to create your interactive map. To start, you need to click on the ‘Add New Layer’ button.

Adding a new layer to your map

Next, you need to provide a name for your layer and click publish.

Creating new layer and publishing it

Now that you have created a layer, you are ready to add map markers on it. Go to Maps Marker Pro » Add New Marker page to add your first marker.

Adding first marker

First you will need to enter a title for the marker, and then search for the location and select it.

You will also need to place your marker on the layer you created earlier. You can do this by typing the name of the layer in the layers field and select it.

Don’t forget to click on the ‘Publish’ button to save your marker.

Repeat the process to add other markers to the layer.

Once you are done adding markers, you can edit any WordPress post or page where you want to add the map.

On the post edit screen, click on ‘Add Map’ button.

Add map button

This will bring up a popup displaying all your map markers and the layer you created earlier. You need to select the layer and click on insert map button.

Select and insert map layer in your post or page

The plugin will add the required shortcode in your post editor area. You can now save or publish your post and preview it to see your interactive map.

Preview your interactive map

You can always edit your main layer to adjust the map size and dimensions.

Maps Marker Pro is a powerful plugin with tons of options like multi-layer maps, custom markers, directions, GPX support, export map in multiple formats, and more. You can explore these options to make your maps even more interactive.

We hope this article helped you lean how to add an interactive map in WordPress. You may also want to see our list of the best Google Maps plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4 CommentsLeave a Reply

  1. Is it possible to embed a link for a google my maps in a button on a page of my blog?

    “Click Here” to follow my route or places I visit

  2. Thank you for giving wide information about updating maps and for also information about it. Map are generally used in now days for making your way better. Your blog contains all those facts who needs to update your maps. Keep sharing more information about updating maps.

  3. Thanks for a very good article about embedding maps. I will use it in a few days to add interactive maps to my website. A few questions, though. Is there a cost to use this plugin, Maps Maker Pro? can it be used to create itineraries by foot and bike or just driving? how can I ensure once I publish the maps no one else will add my maps to their websites? how can I copyright my maps?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.