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:
=================================
https://rafflepress.com/
=================================
For our discount use the code: WPBVIP
For the first method, we will be using Google My Maps which can be found here:
https://www.google.com/mymaps/
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:
https://www.wpbeginner.com/refer/maps-marker-pro
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.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Feel free to take a look at the written version of this tutorial here:
https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/
Check us out on Facebook
https://www.facebook.com/wpbeginner
Follow us on Twitter
http://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
http://www.wpbeginner.com
#WordPress #WordPressTutorial #WPBeginner
source
Thanks mam
An outstanding web instructor! *****5 Star!
very helpful.
Thank you 🙂
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.
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
U r really great mam.
Hello, I need a google map like the one on this page, https://nimh.org.uk/find-a-herbalist/ but I dont know how I can go about it. Help me
Thank you Mam. Really helpful
you're a lifesaver thank you!
How do you get the map to center on the page? There isn't an option on custom html menu pull downs?
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?
Hi, there is it possible to isolate a specific country with this plugin?
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?
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 ?
thank you a loot
Ma'am I am going to make a website including thousands of locations. Can you please recommend a plugin….🙏 ❤️
Is there a way to make a WordPress site that displays different content depending on different user geographical location?
Thank you so much! Very helpful 🙂
wonderful! really helpful. m gonna subscribe
Hi, will i get harged to my billing account for doing this? thanks
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?
Awesome! thanks
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.
great presentation! can you do that also with mapbox?
not working here :S it work when i see it but not for the general public
limited to only 10 layer adds or 10 points of interest which is a problem for those wanting more
Just love you ! 😀
Thanks! this video really helpful and it works on desktop mode but the maps does not show in Mobile mode. WHY?
Great! Ca you make a tutorial how to add 3d map in a website?
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?
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
It was very helpfull. Thank you so much!
My first video on your channel & I must say I'm honored to be here. Thank you very much for this amazing video
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
Great video! How about adding more areas on one page?
Very usefull and well explaned! Thank you so much!
Thanks a lot! Very useful video!