Skip to Main Content

How to add interactive maps to your WordPress website

Divi: the easiest WordPress theme to use

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 themeHow 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

Use map maker 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 that you can recognize for your layer and enter the location you want it to display, just like you would with any other online mapping tool:

Add a new layer

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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:

Display a marker

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:

List of 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:

Example of a layer on a block

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:

Save card identifiers

Now, place the shortcode [mapsmarker layer = "X"] in your post or page. Don't forget to replace the placeholder  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. Save maps with google map

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  :

Create a map on google map

On the next screen, define a title for your map and its first layer, which we will build on. Now find the location you want to share using the Google Map search bar at the top of the screen:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

New map and google map location

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:

Add a marker to your new map.

Once you have multiple markers, you can draw lines between them to display the distances:

Display a distance between two points on the map

When your card is ready, click on the button Share in the menu on the left. There, change the access settings  de private  à public :

Define card access

You can also invite team members to use their emails, so they can immediately access the map:

Map for collaboration with partners

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  :

Embed mapNow 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 look and optimize the grip 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 premium WordPress captcha plugin that is 100% efficient. It allows adding math captcha on WordPress login, registration, password recovery, comments, WooCommerce, Easy Digital Downloads, and bbPress forms.Ultimate math captcha wordpress plugin

Its features include: easy installation and configuration, adding captcha to many forms, support for multiple Math captcha on the same page, customization of error messages, and many more.

Download | DemoWeb 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.

Paypal standard payment gateway for ninja forms

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 premium WordPress plugin, it is possible to modify or delete entries submitted in the forms of your website. A feature that is greatly lacking in the Gravity Forms plugin, which is why this extension was created.Gravity forms list edit wordpress plugins insert tables graphics site blog form

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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.

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.

... 

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
8 shares
Share4
tweet2
Save2