WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» WordPress Plugins» How to Add an Interactive Map in WordPress

How to Add an Interactive Map in WordPress

Last updated on February 1st, 2018 by Editorial Staff
268 Shares
Share
Tweet
Share
Special WordPress Hosting offer for WPBeginner Readers
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

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.

268 Shares
Share
Tweet
Share
Popular on WPBeginner Right Now!
  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Why Build Your Email List Today

    Revealed: Why Building Your Email List is so Important Today!

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

The Ultimate WordPress Toolkit

1 Comment

Leave a Reply
  1. Elle says:
    Feb 20, 2018 at 1:35 pm

    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?

    Reply

Leave a Reply Cancel 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.

Over 600,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2018 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2018)
    • Which is the Best WordPress Slider? Performance + Quality Compared
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • 5 Best VPN Services for WordPress Users (Compared)
    • HostGator Review - An Honest Look at Speed & Uptime (2018)
    • SiteGround Reviews from 1032 Users & Our Experts (2018)
    • Bluehost Review from Real Users + Performance Stats (2018)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2018 – Step by Step Guide
Deals & Coupons (view all)
LiveChat Inc coupon code
LiveChat Inc Coupon
Get 30% OFF on LiveChat, one of the best live chat service providers for WordPress users.
Soliloquy Logo
Soliloquy Coupon
Get 10% off Soliloquy, the best responsive WordPress slider plugin available in the market.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • List25
  • Awesome Motive
  •  

Copyright © 2009 - 2018 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.