Want to insert maps into your WordPress directory site? Use our WordPress map directory plugin. Read this tutorial to learn how!
Online directories make it easy to find businesses, organizations, and useful information. For the listing items with a physical location, a map can add a lot of value. If you represent a location with a map frame, that becomes incredibly helpful.
But the question is, how can we insert a map into a directory listing item. Well, it can be pretty easy if you use the right tool. And, the best WordPress map directory plugin is Business Directory Plugin with its Google Maps module.
Business Directory Plugin is the most powerful and easy-to-use WordPress directory plugin. The plugin offers lots of features to create a future-proof listings site. You can use it to make any type of online directory- from yellow pages to a Yelp clone.
How to use the map directory WordPress plugin
Business Directory Plugin has several modules. They exist to add more functionalities to your listings site. It has a module called “Google Maps”. This module along with Business Directory Plugin makes a WordPress map directory plugin solution.
In this article, we’ll show how the pair works.
As a prerequisite of this tutorial, we’ll need a WordPress directory site built with Business Directory Plugin. Creating a listings site using our WordPress directory plugin is very easy. A WordPress website is what you need to get started. You can check out our detailed documentation for more details.
Also, we have lots of tutorials on how to create a directory website. There are several niche-specific tutorials as well. Plus, our support team is ready to help. So, getting your directory site up and running is a matter of a few minutes.
Once your Business Directory Plugin-based site is online, let’s follow the steps below.
Step 1: Get the Google Maps module
Once you get the premium version of Business Directory Plugin, visit your WordPress dashboard. You’ll see a menu item called Directory in the left menu bar. Hover the mouse over Directory. The Modules link will appear.
Open the Modules page. It presents all the Business Directory Plugin modules. You can activate any module that you got with your membership plan.
Activate the Google Maps module from there. It will take less than a minute.
Step 2: Add the Google Maps API key
Google requires to get their API key to use the Maps service on sites or apps. This way, they can charge the site owner after a certain number of impressions or queries.
Here’s the free threshold for using Google Maps via the API:
- 25,000 map views in a day.
- 2,500 geolocation requests a day.
- 5 requests (any) in a second.
However, Business Directory Plugin has a special caching system that caches a map after loading for the first time. So you’ll get an extended mileage than the original one.
We have detailed documentation on how to get the Google Maps API key. Please read that to learn the procedure in detail. Once you get the API key, add it to the Google Maps module. Go to Directory → Settings → Module Settings → Google Maps.
Enter the API key. Save changes.
Step 3: Assign form fields to use with Google Maps
The module takes location information from your listing content. It sends the information to Google Maps. Then, the map frame is generated on your site based on Google’s map data.
To produce the proper map, we can associate some of our directory form fields with the Google Maps module. Google requires to provide at least one field, but our module supports associating up to 5 fields.
Let’s go to the Google Maps module settings page. Scroll down, and you’ll see the Listing Locations section.
Choose the applicable location-related fields (including custom fields, if applicable) and save changes. The module will use them to display maps correctly.
Please see our form-field documentation to learn how to customize Business Directory Plugin form fields.
Step 4: Customize the module’s general settings
We’ve set up our map fields that will help render the map frames. Now let’s tweak some general settings options of the module.
On the Google Maps module settings page, navigate to the General Settings section.
Then decide the following:
Show listings map on: You’ll get 3 options here. You can turn on the map frames for the category archives, common listing archives, and search result pages. Let’s select all of these options for a better user experience.
Business Directory Plugin offers category-based listings and advanced search options. You can also view all the listing items on a common archive page. The Google Maps module works with all of them.
Current page listings to show on the map: It’s an interesting option. While browsing a listing archive page, what do you want to see on the map?
An archive may contain lots of directory items. An archive page may show a few of them. The visitor needs to open the next page to view more listing archives.
For example, think about a category archive. This particular category may have 100 list items. If you show 10 items per page, then there will be a total of 10 pages for this category’s archive.
Now, using the “Current page listings to show on map” option, you can decide how many items to display on the map. You can consider the listings of the current page only. Or, you can show the entire archive’s listings items on the map.
For this example, it would show either a given page’s 10 items or that category’s 100 items on the map. Choose an option that works for you.
Enable/disable directions: Do you want to offer Google Maps’ direction feature to your visitors? This will let them enter an address on the map (or use their current location) and get directions to a listing location. You can use it with your store locator feature.
Manual location adjustment for listings: This option can be useful for the list submitters, especially with rural listing addresses. If a listing address is not correctly displayed on Google Maps, the list owner/editor can manually adjust the marker on the map.
The adjustable map frame is displayed on the submit listing interface.
Step 5: Tweak the tooltip settings
The module supports Google Maps markers and tooltips. If a visitor clicks on a marker of a listing item’s location, it shows some content. It’s called a tooltip. You can customize the tooltip content template.
In the Google Maps module settings, you’ll get a tooltip content box. It supports HTML inputs. You can put your form field shortcodes in this box using HTML. It will be used as a template.
You don’t need to manually enter the tooltip content for each listing item.
Want to learn more about customizing tooltip content? Please see our detailed tutorial on how to customize your directory’s Google Maps tooltips.
Step 6: Adjust the appearance and styles
The Google Maps module offers a bunch of appearance settings. You can adjust the map sizes using the dimension and zoom settings.
There is a marker cluster option that will be very useful for large directories. Too many markers on a map may make it look cluttered. If you use the cluster option, it will group some items and show them in clusters. Visitors can click on these clusters and open them individually.
Where would you like to place the map frame for archive pages? The module offers 2 options: above the listings and below the listings. Choose whichever you want.
Plus, there’s an animation option for the markers. If you turn this on, the markers will have a drop-in animation effect while loading.
After doing all of the above steps successfully, your directory listing items and archive pages will show Google Maps frames accordingly. To ensure that your list submitters don’t miss the address-related form fields, you can make some of them required.
For example, you can make the country, city, and ZIP code fields required so that the Google Maps module can always get this information.
Troubleshooting the WordPress map directory plugin
We believe this post has all the necessary information to display maps on your directory. It’s a complete tutorial on how to use a WordPress map directory plugin. But still, if you face any issue, we’ve got your back.
First, please start with checking out our troubleshooting tips for the Google Maps module. Also, go through the Google Maps module’s documentation. If you need more assistance, please contact us. We have a smart support team ready to help you.
Bonus: Business Directory Plugin will display the general Google Maps style by default. But you can customize that style using a map styler plugin. We've got a tutorial on how to customize Google Maps styles on your WordPress directory. Check that out!
And if you've been wondering, Business Directory Plugin's Google Maps module works with any WordPress theme or drag and drop builder. Actually, the module is independent. So you don't need to worry about it.
Last but not the least, you can use Google's another service, Google Analytics to measure your directory performance. It doesn't need any API like the maps service.
Learn More: How to Create a WordPress Location Directory
Maps can be extremely helpful for location-based directories. For some specific types of directory sites like restaurant directories, real estate listings, and local business directories, maps are a core part.
Plus, you can offer the map option as a paid listing feature. When you use Business Directory Plugin, you can enjoy all these benefits and beyond.