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:
- Browser side API key: displays maps on your site.
- Server side API key: pulls new address info to front end of site.
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.
*In most cases, the nameserver IP addresses should work. If not, you will need to contact your host directly in order to get the correct ‘server IP address (es)’. Ask for the server IP addresses that you need to use for Google Maps API keys. Let them know you have already tried the nameserver IP’s, but they are not working.
(The Business Directory plugin will work without specifying a server IP Address. However, to keep your API key secure, we recommend adding your server IP information if possible.)
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:
The Business Directory plugin is not up-to-date. Try updating your Business Directory to the most recent version.
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.
The HTTP Referrers are not entered correctly. Scroll up to Step 3 to make sure your format exactly matches the example shown.
Billing is not enabled on your Google Maps Console. Google Maps requires that billing be enabled in order to display maps on your WordPress website. Login to your Google Maps Console to enable billing.
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 static outbound server IP address based on Google’s server IP setup requirements.
NOTE: The Business Directory plugin will work without specifying a server IP Address. However, to keep your API key secure, we recommend adding your server IP information.
