Add Google Maps to your Business Directory
The Chamber Dashboard Business Directory offers a couple of options to use Google Maps in your Directory:
- Link to Directions – This does not require any API key at all. A link to directions will automatically display on individual Business pages when an address is entered.
- Map of all listings – This requires both a browser API and a server API key & displays some or all listings from your Directory on a Google Map.
- Display Google Map on single Business listings – This requires both a browser API and a server API key.
Show get directions link only
Add Map of all listings
Show Google map on single Business 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 generate your own Google Maps API key.
Add Directory map
Display Map of all Directory listings
To add a map of ALL Business Listings to any page, use the following shortcode. Or add the category parameter to only display Directory listings from a certain category on your 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:
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.
[business_map category="restaurants-and-eateries, coffee-shops"]
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.
[business_map level="world-class-supporters, small-potatoes-supporters"]
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.
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.
- yes – default
- no – turns off the link
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.
[business_map width="50%" height="500px"]
Instead of displaying an individual icon for each business on the map, display cluster icons showing where businesses are grouped.
- 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…
Display maps on single 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.
Map location not correct – Fix map display
NOTE: These troubleshooting steps assume that you have already entered your Google Maps API Key in Chamber Dashboard settings.
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.
- All address field should be complete, including:
- Street Address
- State / Province / Territory
- Zip Code / Postcode
- Check to be sure there are no spaces before or after your address.
- Be sure to click ‘Update’ to save any changes.
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 these troubleshooting steps:
- 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.
- 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. *.yoursite.com/*
- Try temporarily removing the website restriction to see if this resolves your issue.
- If these do not help, you can 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.