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.
Maps won’t display
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 on the Google Maps Console in order to use their API to add Google Maps to your site.
If you are getting an error ‘Page can’t load Google Maps’, follow the four steps below to generate a Google Maps API Key
Generate Google Maps API Key
How to get a Google Maps API key
Step 1: Create an Google Maps Account
• 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.
• Setup a Billing Account. If you are not already using Google Cloud products, you’ll need to create a billing account.
• Enter an account name. (Use your site or project name to keep things simple) and select the organization.
• Setup billing profile, then click Submit to enable billing.
NOTE: 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.
Step 2: Enable Google Map API Services
In order to use your Google Maps API key with Chamber Dashboard, you will need to enable geolocation, geocoding and maps javascript.
- Return to the Google Maps API console.
- You should see your project name at the top left of the page.
- Click on ‘Enable APIs’ button.
- From the Maps API library, enable geocoding, geolocation and maps javascript.
Your API dashboard should look similar to this when you are finished, with your project name at the top and a list of enabled API services below.
Step 3: Create 2 API keys
In order to display maps that use the Business listing’s current address on your Directory pages, you need both a browser side API key and a server side API key.
From your Google Maps API console dashboard, switch from the dashboard view to credentials view.
If you have already created an API key above, you will see this key in the credentials view.
- Click on ‘Create Credentials’ to create a second API key.
Next we’ll restrict your keys so that they can only be used on your website.
- Click to edit one of your API keys.
- Change the name of the key to ‘browser key‘.
- Restrict your key by HTTP referrer.
- Enter your website domain twice as shown below.
- Be sure to save your changes
- Edit the other API key.
- Change the name of the key to ‘server key‘.
- Select restrict by IP address.
- Enter both IP address of the nameservers on your web host. (Usually these are found in the cPanel, however you may need to contact your hosting company for the IP addresses. If you are calling the company, be sure to ask for CIDR notation for Google Maps of the server IP address.)
- Scroll down to set the API restrictions for the key.
- Select Geocoding API.
- Be sure to save your changes.
Step 4: Add both keys to Chamber Dashboard settings
- Login to your WordPress website.
- Go to the Chamber Dashboard >> Directory Settings.
- Enter both the browser and server keys and click ‘save’.
That’s it! Google Maps will now show up in your Directory.
NOTE: If you already have an API key setup, be sure to login to your Google Cloud Console and enable:
> geolocation
> geocoding
> maps javascript
Troubleshoot
Some of the most common issues for setting up a Google Maps API key are:
API Keys not entered in the correct field: Check to be sure that your browser API key is entered in the Chamber Dashboard settings field for the browser key and your server API key is entered into the Chamber Dashboard settings field for the server key.
Maps not showing at all on individual listings:
- Check to be sure you have set maps to display on the Directory settings page.
- Check to be sure the address is correctly entered, including the country.
Server API not working: Check with your website host to be sure you are using the correct server IP address based on Google’s accepted server IP address instructions.
