Google recently made a change to their terms of service for the Google Maps API that may impact your or your client’s website.
Overview of the Problem
Sites are only affected by these issues if they were not already using the Google Maps API prior to June 22nd, 2016, whether you were using the Google Maps API through Nearby Now or some other plugin or code designed to show Google maps.
You can recognize if you are affected if you are experiencing one or both of these symptoms on any web site you have integrated to show service area map, reviews and/or checkins:
- Symptom 1: One or more of the mini-maps that show an approximate location for each review may not load on pages that are integrated with either our WordPress or Joomla plugins, or through the content display API. Depending on how you have the styles setup on your client sites, you may see an error instead, or a red circle with a cross through it in place of the image, or the URL http://developers.google.com/maps/usagelimits may appear, or the image may simply not load. Please note that we implemented a change for the behavior of these maps last week – we now load no more than 10 of them on a given page, regardless of how many reviews you choose to display. That helps minimize load, and is a permanent change.
- Symptom 2: This symptom only occurs on sites that were integrated with Nearby Now for the first time on or after June 22nd, and have never been integrated with Google Maps through any other integration or plugin. In those cases, the service area/review heatmap may not display at all, and may instead display grey box with an grey circle and an exclamation point, and may also show an error that says: “Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”
Details of the Solution
We have implemented a permanent solution to handle both of the symptoms described above.
Available today, we have added the ability for you to insert a free client-specific Google Maps API key into each storefront account to resolve this issue. To take advantage of this fix, you need to follow the steps below to acquire a free Google Maps API key, then to add that key to your client’s Nearby Now settings.
Step 1: Obtaining a Google API Key
For each client that is affected by this issue, follow these steps to generate a unique Google Maps API key:
- Login to https://console.developers.google.com/apis/ – you will need to create a free Google account if you do not already have one.
- Navigate to the API Manager: https://console.developers.google.com/apis/library
- From The Google APIs tab, setup both of the following Google APIs: Google Maps JavaScript API and Google Static Maps API by clicking into each one and then clicking the blue Enabled button.
- Once you have enabled the two APIs, go back to the API Manager main page then click on credentials in the left sidebar
- Click on the blue Create Credentials button.
- Choose Server Key option. If you don’t see “Server Key” as an option, choose “API Key”.
- Give the credentials a name you will remember, such as the company name, or Company and Nearby Now Maps.
- Click Create.
- Record the generated Key for use in the next step.
It’s important that when setting up the Google API Key using the steps above, that you enable both the Google Maps Javascript API and Google Static Maps API. Omitting the Google Maps Javascript API will cause the heat-map not to render and omitting the Google Static Maps API will cause the mini-map images not to render.
Step 2: Adding the Key to Company Settings
For each client storefront account that is affected by this issue, follow these steps to assign the unique Google Maps API key to their Nearby Now account:
- Login to the appropriate Nearby Now storefront account using a user account that has admin privileges for that storefront account;
- Go to Settings > Company Profile, then scroll down to Google Maps API Key
- Insert the Google Maps API key you obtained in step 1 above, for this client, into the Google Maps API Key
- Click Save Changes
NOTES IF THE STEPS ABOVE DO NOT WORK
If the the two steps above do not resolve the issue, it is mostly likely because you have some other plugin or code on the site that is calling the Google Maps API before Nearby Now does so. In this scenario, in order to avoid conflicts, we do not load the Google Maps API a second time. You could resolve this in a couple ways:
- First, if you know what the other request to the Google Maps API is, and you don’t need it, go ahead and turn it off. That should resolve the issue, since now the Nearby Now request (using the right API key) will go through.
- Second, if whatever else is calling the Google Maps API on the site supports passing a Google Maps API key, please consult their documentation or support and add a customer-specific Google Maps API key on their site.
- Third, you could add a script tag to the section of your site declaring the correct customer-specific Google Maps API key. Please do not attempt this change if you don’t know how to edit or locate where to edit this section, are not comfortable editing and troubleshooting this section, or are not comfortable editing and troubleshooting script tags. If you have the appropriate expertise, the tag you would add to the section would be:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>- Where YOUR_API_KEY is a Google Maps API key you obtained above. Please back up your header files before making these changes, so that if you encounter any issues you can return to your original file.
- Fourth, if you are not comfortable with the step described in Third above, add the following script tag to each page above the point on that page where you are calling the Nearby Now shortcode or API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>- Where YOUR_API_KEY is a Google Maps API key you obtained above. If your page editor includes a wysiwyg (what you see is what you get view) please ensure that you are not implementing these changes in that view – please ensure you implement them in text or code editor view.
Support
If you have tried all the steps above and you are not seeing a resolution to these issues, please send the following information to support@nearbynow.co:
- URLs of specific pages where you are experiencing the problem;
- Description of which of the problem(s) you are experiencing from the symptoms list above;
- Name of the client storefront account;
- Which of the solutions above you have tried, and what did not work with each;
- Status of the solutions you’ve tried – whether they are still live on the client site, or you took them down.
