WEBFI-WordPress-How to Add an Interactive Map in WordPress

So you want to include an interactive map on your WordPress site? These interactive maps allow your users to discover routes, places, and itineraries by clicking on markers on the map or by moving their mouse around. In this guide, we’ll show you how to easily add an interactive map in WordPress.

This video brought to you by RafflePress, the best WordPress giveaway plugin available, take a look at their site here:


For our discount use the code: WPBVIP

For the first method, we will be using Google My Maps which can be found here:

Click on the “Create a new map” button and it will bring up a map. You should be able to select the untitled layer to rename it to whatever you would like the map to be named. Search for the different locations you want to add to the map and click the “+ Add to map” button at the bottom to add it to your map.

Each location added this way should allow you to customize the color and icon that it will be displayed with when someone views the menu. Now we want to go under Share and allow the menu to be publicly found on the web and save that change to ensure your visitors can see the map.

Go to the additional options under the three verticle dots and choose the “Embed on my site” option to get the code needed to place the map on your site. Paste the code into a post or page that you would like the map to appear on, in a HTML block if you are using the default editor, and once it is published you should see your map in your content.

While the Google Maps embed can get the job done for most sites, it does have a pre-set width and height which does not scale will with mobile. This is why we have our second option with Maps Makrer Pro found here:

Once the plugin is installed and activated on your site, you should have a new menu area on the left-hand side called “Maps Marker Pro” that you will want to navigate to. Clck the “Add new map” button and add the locations similar to how you would have with Google’s maps.

By default the current plugin uses Algolia Places to find the different locations but that can be changed should you like. Save the map and if you go back into the “List all maps” area to copy a shortcode to embed the map for those using the classic editor. Otherwise, you can go into a post/page and add the Maps Marker Pro block to select and embed your newly added map.

If you liked this video, then please Like and consider subscribing to our channel here for more WordPress videos.

Feel free to take a look at the written version of this tutorial here:

Check us out on Facebook

Follow us on Twitter

Check out our website for more WordPress Tutorials
#WordPress #WordPressTutorial #WPBeginner



  • raj pandey on February 6, 2020

    Thanks mam

  • Michael Marcus on February 8, 2020

    An outstanding web instructor! *****5 Star!

  • Hair Stock on February 11, 2020

    very helpful.
    Thank you 🙂

  • Michael Meyer on March 4, 2020

    Great video. Thank you for the content. Any suggestions for making a map feature that has a starting point from a store and then have the customer type in their address and it tells them how many driving miles it is to their house from the store? I want to use it for an estimation tool for a delivery service.

  • Moeez Ahmad on March 28, 2020

    After adding custom html , it shows map in WordPress site while using admin panel , but when I open website from incognito mode , and from another PC it does not show map in my website

  • Faysal Ahmed on April 3, 2020

    U r really great mam.

  • Michael Kwesi Baah on May 18, 2020

    Hello, I need a google map like the one on this page, but I dont know how I can go about it. Help me

  • Soul Place Surgery on May 26, 2020

    Thank you Mam. Really helpful

  • Ann Margarett Andrada on May 30, 2020

    you're a lifesaver thank you!

  • Kevin Warren on June 4, 2020

    How do you get the map to center on the page? There isn't an option on custom html menu pull downs?

  • Anisur Faysal on June 16, 2020

    Awesome video! Thanks a lot. I was wondering, is there a way to have the map be interactive enough when you click a certain area it will link to a post on our site?

  • vianney kb on June 24, 2020

    Hi, there is it possible to isolate a specific country with this plugin?

  • Omar AlThuwaynee on July 28, 2020

    Thank you for comprehensive illustration. Can I add interactive map showing the country of origin of my website members (subscribers) amount based on working place?

  • Syed Rameez on September 16, 2020

    That was great . Can you tell me a plugin or way to get user input in form of pin location and get the location of user ?

  • Billos 91 on October 8, 2020

    thank you a loot

  • ebay Review Sinhala on November 2, 2020

    Ma'am I am going to make a website including thousands of locations. Can you please recommend a plugin….🙏 ❤️

  • James S on November 11, 2020

    Is there a way to make a WordPress site that displays different content depending on different user geographical location?

  • Eugenia Bernardi on November 30, 2020

    Thank you so much! Very helpful 🙂

  • Syed Shahnawaz Ali on January 16, 2021

    wonderful! really helpful. m gonna subscribe

  • seba lizarraga on January 16, 2021

    Hi, will i get harged to my billing account for doing this? thanks

  • Stevio Bee on January 30, 2021

    Thanks, learned a lot there, do you know if Map Marker Pro has user/visitor location adding, so website visitors can add their own locations to the map?
    Or any map plugin for WordPress that has that function?

  • Francoise Luiten on February 5, 2021

    Awesome! thanks

  • Řavi Řachuri Řising Sun on February 10, 2021

    I have a question. I want to develop a map within the website. A university website. I want to point out few building blocks in the university to navigate guests easily. If the guest enters into university they use our device it should navigate them the way for different blocks within the campus. Is it possible? Which plugin should I use to develop ?

    I want to add multiple building locations points in the campus.

  • Joe Doe on February 17, 2021

    great presentation! can you do that also with mapbox?

  • André Madruga Paulo on April 20, 2021

    not working here :S it work when i see it but not for the general public

  • TCsTrinketsTreasures on May 8, 2021

    limited to only 10 layer adds or 10 points of interest which is a problem for those wanting more

  • ergo proxy on May 10, 2021

    Just love you ! 😀

  • visit oecusse on August 21, 2021

    Thanks! this video really helpful and it works on desktop mode but the maps does not show in Mobile mode. WHY?

  • acinad on August 28, 2021

    Great! Ca you make a tutorial how to add 3d map in a website?

  • Freeemax on September 2, 2021

    Clear video! By any chance, do you know a way to let subscribers or visitors of a website place their own marker to the map? Would there be a WordPress plugin, or does it require something like CSS?

  • Mohammad Shafeeq on September 9, 2021

    Hi could you tell how can I remove that this map was made with Google map create your own label in it I tried using CSS but not working

  • Dydaskal on October 8, 2021

    It was very helpfull. Thank you so much!

  • Find-Your-Style on October 13, 2021

    My first video on your channel & I must say I'm honored to be here. Thank you very much for this amazing video

  • kumbackquatsta on October 26, 2021

    please do a geo my wp tutorial. i want to add a simple location tag to my pages, and the locations be searchable or displayed on my site

  • Paulo Rañola on November 16, 2021

    Great video! How about adding more areas on one page?

  • AndreeAnne Martel on December 5, 2021

    Very usefull and well explaned! Thank you so much!

  • maja marek on December 9, 2021

    Thanks a lot! Very useful video!

WhatsApp us
Live Chat

Office hours operation Mon-Sun 8:00 am ET – 4:00 pm ET

To start your Premium WP or Cpanel service, use our domain search engine, if the domain you want is available, contact us by Whats app to activate your project.

The easiest, fastest, and most secure way to communicate with us.
Please enter your domain.
Please verify that you are not a robot.

Terms Privacy