A contact page is much more helpful with a map and even more useful with interactive maps. See this article on the best methods for implementing these interactive maps on your WordPress site using plugins or not.
That’s where interactive maps come in. They let you place movable markers everyone on your team can edit. In this article, we’ll talk about when this type of map comes in handy. Plus, we’ll teach you two ways to add them to WordPress.
What are Interactive Maps?
Adding a map to a website is simple enough. Google Maps lets you embed maps into your pages in minutes. The advantage of this approach is that visitors can move around maps, zoom in and out, and more. These maps are more interactive than simple images, but they don’t enable you to make changes once you’ve added them to your website.
On the other hand, interactive maps enable you (and, in some cases, your coworkers) to add new markers, icons, text, and more. Imagine, for example. You’re planning a meetup for members of your website. You could set up a map with multiple pins to suggest locations.
You could also use an interactive map for your users to share their locations or point each other toward places they might want to visit. These are pretty niche applications. However, interactive maps can come in handy across various situations. Plus, they’re not necessarily more difficult to add than their regular counterparts.
WordPress Interactive Maps
When it comes to interactive maps, you can either embed one into your website or use a plugin to help you do it. The former approach is more straightforward, but plugins often pack many more features, as you might expect. Let’s review the plugin approach first to showcase those features.
1. Use the Maps Marker Pro WordPress Plugin
The Maps Marker Pro plugin is a one-stop premium solution for including maps in WordPress. It has dozens of advanced features, such as pulling maps from multiple services, adding practically unlimited markers to your maps, and classifying them. Plus, visitors can filter the types of titles they want to see on your maps.
Other fun stuff you can do using the plugin includes adding distance and route information between markers. You can even share your location in real time through your website’s map if you’re inclined to do so. Configuring the plugin can take a little time, considering the wealth of features it offers. However, it’s not as difficult as you might imagine.
To get started, set up and activate the plugin as you would any other. Once the plugin is ready, you’ll need to add a new map or ‘layer’, which you can do from the Maps Marker Pro > Add new layer tab. Here, set a name you can recognize for your layer and enter the location you want it to display, just as you would with any other online map tool:
Style, Size and Zoom for WordPress Interactive Maps
You can fine-tune the size and zoom level you want to set by default using the left-hand menu. There’s also an option called Marker clustering, which will show an icon with the number of markers in an area if you zoom too far out, as in the example below:
The Show list of markers below the map option, on the other hand, is pretty self-explanatory. It can come in handy if you want to include additional information about your characteristics:
Now scroll down and look for the option that reads Add a new marker to this layer. On the next screen, you’ll be able to set a name and a location for your title using the same map as in the previous one.
You can also choose an icon and set popup text for your marker. This will show up when people click on the title or select it from a list if they decide to include it. In any case, remember to hit the Publish button when you’re done. After adding a few markers, your initial layer should look something like this:
When you’re ready to add your new interactive map to one of your pages, you’ll need to use a shortcode. Scroll back to the top of the Edit layer tab and look for its corresponding ID:
Place the [mapsmarker layer=”X”] shortcode into your desired post or page. Remember to replace the X placeholder with the ID of your layer beforehand, though.
Your map should now be up and running on your website! More importantly, you or anyone on your team can edit it and add new markers at any time without leaving your dashboard.
2. Google Map’s Built-In Embed Option
Google Maps hardly needs an introduction – it’s a service that lets you pull maps from all over the world to share locations with other people, find addresses, and even share where you are. When it comes to websites, you can embed Google Maps into your pages in a plethora of ways.
However, most maps offer limited amounts of interactivity. They enable you to navigate through them, zoom in and out, and switch your view, but not much more.
The thing is, Google Maps offers a lot more features than just plain mapping. For example, you can add multiple markers, measure distances, and include directions in your maps, similar to Maps Marker Pro. To try out these features, go to Google My Maps and click on the Create a New Map button:
Customize Google Maps
On the next screen, set a title for your map and its first layer, which we’ll build upon. Now find the location you want to share using Google Map’s search bar at the top of the screen:
When you’re zoomed in, you can use the marker symbol at the top of the screen to highlight locations on your map. Just click where you want to place your marker, then set a name and an icon for it:
Once you have multiple markers down, you can trace lines between them to show distances:
When your map is ready, go to the Share button on the menu to the left. There, change the settings under Who has access from Private to Public:
You can also invite individual team members using their emails, so they get immediate access to edit the map:
In any case, you still have to embed your new map on your website. You can do so by clicking on the three dots icon next to your map’s title and clicking the Embed on my site option:
Now, you can copy and paste the embed code on any of your pages using Code module, for example. Your new map will show up wherever you place it. Plus, your teammates will be able to edit it and add new markers through Google Maps as needed.
3. Interactive Geo Maps: WordPress Interactive Plugins
Create interactive maps with areas and colored markers. You can view world maps, continent maps, and individual country maps. Create your first interactive map in minutes! Use it to display your visited countries map, travel map, office location, project map, sales rep map, statistics map, data visualization map or anything else!
The plugin generates interactive, responsive, touch-enabled SVG maps to embed directly into your HTML5 pages, compatible with all modern browsers and devices. So, one of the best interactive maps plugins for WordPress.
4. RVM – Responsive Vector Maps
One click to create beautiful linkable vector maps that can be heavily customized, toggle elements on the page, or display content on top of the map. All settings are on one page!
Vector graphics never lose quality when scaled down or scaled up. With RVM, you don’t need to create static images for area map labels. You can use cards in the sidebar or post/page content with a shortcode. As a result, one of the best interactive maps plugins for WordPress.
5. WP Store Locator
WP Store Locator is a powerful yet easy-to-use location management system. You can customize the map’s appearance and provide custom labels for the input fields. Users can filter results by radius and get directions to nearby businesses.
WordPress Interactive Maps Final Words
Adding maps to your WordPress website is simple, mainly if you’re using Visualmodo, thanks to its Map element. However, regular maps are only helpful if you want to showcase a single address. If you need more flexibility, interactive maps are the way to go. You’ll be able to integrate the Google maps extra features and the best interactive maps plugins shown in this article.
