If you use a service such as Google Maps, just choose a location and embed the map on your website. However, you can't edit maps on the fly, and neither can your coworkers - which is often necessary for collaborative projects.
This is where interactive maps come in. They allow you to place movable markers that everyone on your team can edit.
In this tutorial, we are going to talk about when this type of card comes in handy. Additionally, we'll show you how to add them in two ways to WordPress.
But before you start, take the time to take a look at How to install a WordPress theme, How many plugins to install on WordPress.
Then, mlet's get to work!
What is an interactive map (and when to use it?)
Adding a map to a website is pretty straightforward. Tools such as Google Maps allow you to embed maps in your pages in minutes. The advantage of this approach is that visitors can move around the maps, zoom in, zoom out, etc.
These types of maps are more interactive than just pictures, but they don't allow you to make any changes once you've added them to your website.
On the other hand, interactive maps allow you (and in some cases, your colleagues) to add new markers, icons, texts and more. Imagine, for example, that you are planning a meeting for members of your website. You can configure a map with multiple pins to suggest locations.
Discover by the way 5 WordPress plugins to add geolocation to your Blog
You can also use an interactive map so your users can share their locations or navigate to places they want to visit. To be more precise, these are niche applications. However, the interactive maps can be useful in a wide variety of situations.
In addition, they are not necessarily more difficult to add than their counterparts.
How to add interactive maps to your WordPress site
When it comes to interactive maps, you can either embed one on your website or use a plugin to help you do that. The first approach is simpler, but plugins often pack a lot more features, as you might expect. Let's go over the plugin's approach to show what these features are.
1. Use the plugin Maps Marker Pro
The plugin Maps Marker Pro is a one-stop premium solution for adding maps to WordPress. It offers dozens of advanced features, such as those that let you view maps from multiple departments, and add a virtually unlimited number of markers to your maps and organize them. Additionally, visitors can filter the types of markers they want to see on your maps.
Other fun things you can do using this plugin is adding distance and route information between markers. You can even share your own location in real time through your website map, if you're inclined to do so. Setting up the plugin can take a bit of time, given the wealth of features it offers.
However, it is not as difficult as you might imagine.
To get started, configure and activate the plugin just like you would any other. If you are new to WordPress, find out How to install a plugin in WordPress
Once the plugin is ready you need to add a new map or layer, which you can do from the tab Maps Marker Pro> Add a new layer. Here, set a name you can recognize for your layer and enter the location you want it to display, as you would with any other online mapping tool:
Now you can adjust the size and zoom level you want to set as default, using the left menu. There is also an option called Marker clustering , which will display an icon with the number of markers in an area if you zoom in too far, like in the example below:
The option Search Markers, on the other hand is quite explicit. It can be useful if you want to include additional information about your markers:
Now scroll down and find the option « Add new marker on this layer« . On the next screen, you will be able to define a name and location for your marker, using the same map as the previous one.
See also How to compress and resize images on WordPress
You can also choose an icon and set pop-up text for your marker. This will appear when visitors click on the marker itself, or select it from a list if you've chosen to include it.
In any case, don't forget to press the button Publish once you have finished. After adding a few markers, your initial layer should look like this:
When you are ready to add your new interactive map to one of your pages, you should use a shortcode. Scroll to the top of the tab Edit layer and look for his corresponding ID:
Now, place the shortcode [mapsmarker layer = "X"] in your post or page. Don't forget to replace the placeholder X by the ID of your "layer" in advance, however.
Your card should now be operational on your website! More importantly, you or anyone else on your team can edit it and add new markers at any time, without leaving your dashboard.
2. Using the Built-In Embed feature of Google Map
Google Maps doesn't really need an introduction - it's a service that lets you extract maps from around the world to share places with other people, find addresses, and even share where you are. When it comes to websites, there are many ways you can integrate Google Maps into your pages. 
However, most cards offer limited amounts of interactivity. They allow you to navigate through them, zoom in, get out and change your view, but no more.
The fact is that Google Maps offers many more features than simple mapping. For example, you can also add multiple markers, measure distances, and include directions in your maps. To try these features, go to Google My Maps And click on the button + Create A New Map :
On the next screen, set a title for your map and its first layer, which we'll be building on. Now find the location you want to share using the Google Map search bar at the top of the screen:
As you zoom in, you can use the marker symbol at the top of the screen to start highlighting locations on your map. Just click where you want to place your marker, then set a name and icon for it:
Once you have multiple markers, you can draw lines between them to display the distances:
When your card is ready, click on the button Share in the menu on the left. There, change the access settings de private à public insurance :
You can also invite team members to use their emails, so they can immediately access the map:
In any case, you should always embed your new card on your website. You can do this by clicking on the three dots icon next to your map title and clicking on the option Embed this map :
Now you can copy and paste the embed code on your pages. Your new card will appear wherever you place it. In addition, your colleagues will be able to edit it and add new markers via Google Maps if necessary.
Discover also some premium WordPress plugins
You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. Ultimate Math Captcha
Ultimate Math Captcha is a WordPress Plugin 100% effective captcha premium. It allows to add a mathematical captcha on the forms WordPress login, registration, password recovery, comments, WooCommerce, Easy Digital Downloads and aux forms from bbPress.
Its features include: easy installation and configuration, adding captcha to many forms, support for multiple Math captchas on the same page, customization of error messages, and many others.
Download | Demo | Web hosting
2. PayPal Standard Payment Gateway for Ninja Forms
PayPal Standard Gateway for Ninja Forms allows you to create forms that integrate seamlessly with the PayPal payment gateway. You will be able to create personalized order forms and receive payments using standard Paypal accounts.
Its main features are: easy and fast integration, IPN integration, the ability to activate / deactivate the PayPal gateway on individual forms, support for regular payments, etc.
Download | Demo | Web hosting
3. Gravity Forms - List & Edit
With this WordPress Plugin premium, it is possible to modify or delete entries submitted in the forms of your website. A feature that is sorely lacking in the Gravity Forms plugin, which is why this extension was created.
Among its features we will mention among others: the mediting and saving of the recorded data, theuppression of the data entered, themodification and deletion of articles already published, the iPerfect integration with jQuery Datatables plugins and Gravity-Forms, theupport of conditional logic, simple and quick to install, and much more.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- Your images do not display with SSL? Here's the solution
- How to add a widget to the header of your WordPress blog
- How to compress and resize images on WordPress
- How to present and share PDFs on WordPress?
Conclusion
Here ! That's it for this tutorial, I hope it will allow you to create interactive maps in WordPress. Do not hesitate to share with your friends on your favorite social networks.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation.
If you have suggestions or remarks, leave them in our section Comments.
...
