Use the Business Directory plugin to:
- Add a Directory map page to display multiple listings from your Directory on a Google Map.
- Display a Google Map on single Directory listings.
Display Google Maps
In June of 2018, Google Maps changed the process required to access and use Google Maps on a website. Google now requires that you set up an account with them in order to use their API to add Google Maps to your site.
If you are seeing the error:
“This page didn’t load Google Maps correctly”
you may need to create your own Google Maps API key.
Add Directory map
Display Map of multiple Directory listings
To add a map of ALL Business Listings to any page:
Use the following shortcode: [business_map]
NOTE: If you are getting an error ‘Page can’t load Google Maps’, you may need to generate a Google Maps API Key
This shortcode has several parameters. The parameters are:
category
Limit the map to display only a certain category or categories. Put a comma-separated list of categories you wish to display. You need to use the category slug, which is usually the category name, all in lower case, with dashes instead of commas. For example, a category called “Restaurants and Eateries” will probably have a slug of “restaurants-and-eateries.” To find out for sure what the category slug is, go to Businesses –> Business Category. That page lists all of your categories, and also shows the slug for each category.
Example: [business_map category="restaurants-and-eateries, coffee-shops"]
membership level
Limit the map to display only a certain membership level or levels. Put a comma-separated list of membership levels you wish to display. You need to use the membership level slug, which is usually the membership level name, all in lower case, with dashes instead of commas. For example, a membership level called “World-Class Supporters” will probably have a slug of “world-class-supporters.” To find out for sure what the membership level slug is, go to Businesses –> Membership Level. That page lists all of your membership levels, and also shows the slug for each membership level.
Example: [business_map category="world-class-supporters, small-potatoes-supporters"]
perpage
Determine the number of businesses that display on the map. By default, all of the businesses will display, but if you have a lot of businesses, the map might take a very long time to load. Adding the “perpage” parameter will display that number of businesses on the map.
Example: [business_map perpage="25"]
single_link
Determine whether the business name links to a page displaying more detail about the business. The link will automatically display by default, but if you don’t want there to be a link, you can turn it off. If you do this, it means that visitors to your site will not be able to find the single business page.
Options
- yes – default
- no – turns off the link
Example: [business_map single_link="no"]
Set Map Size
The default width of your map is 100% and 500px high. To adjust the width or height, enter width as a % or px. Height must be in px.
Example” [business_map width="50%" height="500px"]
Set Cluster
Instead of displaying an individual icon for each business on the map, display cluster icons showing where businesses are grouped.
Options
- no – default
- yes – turns on clustering
Set Map Zoom
The map will automatically zoom in to a point that shows all of of your listings. If your map is zoomed out too far, try the following:
- Update or remove any outliers.
- Try adding cluster=”yes” in your shortcode.
- Or refine the listings shown by adding category parameter to your shortcode. For example category=”restaurants-and-eateries, coffee-shops”.
See before & after examples below…
Generate Google Maps API Key
How to get a Google Maps API key
• Go to https://developers.google.com/maps/documentation/javascript/get-api-key
• Click on ‘Get Started’
• Select ‘Maps’
• Click on ‘Select a create project’
• Rename ‘My Project’ with your project name.
• Create a Billing Account. If you are not already using Google Cloud products, you’ll need to setup a billing account.
• Enter an account name. (Use your site or project name to keep things simple) and select the organization.
• Setup billing profile. – Select Submit to enable billing.
Please note that Google gives users $200 free usage every month for maps, routes and places. This gives you up to 28 000 map requests and 40 000 direction calls per month, free of charge. You will only be billed when your usage exceeds your monthly $200 credit limit.
- Next click on ‘Enable Maps Platform’ or ‘Create API Credentials’.
- Follow the prompts to generate your API key.
- Open a new browser window, login to your WordPress website
- Copy/paste your new API key into the Chamber Dashboard settings page & click ‘save’.
In order to use your Google Maps API key with Chamber Dashboard, you will need to enable geolocation and geocoding.
- Return to the Google Maps page & click ‘done’.
- You should see your project name at the top left of the page.
- Click on ‘APIs’ in the left-hand menu.
- Scroll down until you see Geocoding under Additional API’s.
Click on Geocoding API
Enable Geocoding API
Click on ‘APIs’ again in the left-hand menu to bring up your list of Enabled API’s.
Notice Geocoding has now been added to your list.
Repeat the process to enable Geolocation.
Login to your WordPress website,
go to the Chamber Dashboard settings page to enter your new API key and
click ‘save’.
That’s it! Google Maps will now show up in your Directory.
NOTE: If you already have an API key setup, all you need to do is login to your Google Cloud Console and enable geolocation & geocoding.
Display map on single listing
Display maps on individual Business Listings.
Change Map Marker Icons
By default, Chamber Dashboard will show a black map pin icon. However, you can customize the icons that appear on your maps, so that each business displays a different icon based on its category:
To do this, go to Businesses –> Business Category. Here you will see a list of all of your categories. To create a new category with an icon, simply fill out the form on the left side of the page. At the bottom of the form, click “upload image” and upload your map icon.
To add an icon to an existing category, click on the category name in the list of categories. At the bottom of the form, click “upload image” and upload your new map icon.
If you are looking for map icons, here are some good resources:
CHANGE MAP MARKER COLOR
Since the default map marker is set by Google Maps, in order to change the color, you’ll first need to
- Find a map marker that you’d like to replace it with, (the list above includes several options for map markers)
- Set the color of your map marker.
- Download your new map marker icon.
- Upload it to all of your categories.
*Don’t forget to include an attribution!
CHANGE MAP ICON SIZE
Map icons will display as actual size. So to make the icon larger or smaller, you’ll need to re-size the icon using image editing software or a map icon designer from the above list before uploading it to your category.
Troubleshoot
Map location not correct – Fix map display
NOTE: These troubleshooting steps assume that you have already entered your Google Maps API Keyin Chamber Dashboard settings.
If a map is not showing up or the map marker is not in the right place, first check the address of the listing to be sure it is correct.
Map not showing up on Single Business Listing pages
First, check to be sure you have selected maps to display:
- Go to Chamber Dashboard Settings
- Select ‘Map’ under ‘Single Business View Options.
Next, open the Business Listing to make sure you are using a valid address. Be sure to click ‘Update’ to save any changes.
NOTE: If your map is not showing up, it is usually because there are extra spaces in the address field. Any extra spaces before or after the address should be removed.
Map Marker not in the right place
If your map is showing listings in the ocean, or your marker is not in the right place on the map, try changing the map coordinates.
- First step, open the listing and click ‘Update’ to refresh.
- Second step, check the address of the listing to be sure it is correct.
- Make sure the address pulls up the right location by copy/pasting into maps.google.com.
- Be sure to click ‘Update’ to save any changes.
- Third, check your Google Map API for the following:
- Billing is activated.
- Geolocation & Geocoding are enabled.
- Double-check website restriction – if you have added a website restriction to your API key, check to be sure it exactly matches your website address – ie. https://yoursite.com*
- Try temporarily removing the website restriction to see if this resolves your issue.
- If these do not help, manually update the map coordinates:
- From the Listing, click on ‘Preview Map’
- Then on ‘Change Map Coordinates’
- Enter the Latitude & Longitude for the new address
- Click on ‘Update Map Preview’
- Be sure to click ‘Update’ to save your changes.
