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