How to fix a map that is not loading correctly

You have added your API key but still have a bouncing blue pin? 
To solve this, first let’s pretend we are web developers and try to investigate further. Open your store locator page in the browser and then press F12, or right click and select Inspect. This will open a frame within your browser (normally on the right, or at the bottom) Click on ‘Console‘ in the opened frame.

 

‘Console’ is a place where browsers log information about what’s happening on the page. You can find info / warning / error messages there.  We’ll be hunting for error messages and they are normally colored in red. Below is the list of error messages that may be related to your map loading incorrectly. If you see any of them in your browser console, follow the resolution steps.

If you are using Google Maps you may see the following errors:

1. Google Maps JavaScript API error: ApiNotActivatedMapError
Error Description: This error appears if no API key has been added to your Storemapper account, or if the Maps Javascript API was not enabled.

Resolution Steps:
If you have not yet added your API key to Storemapper follow the steps from the following article:
https://www.storemapper.com/support/knowledge-base/how-to-add-a-google-maps-api-key-to-your-store-locator/

If you have added an API key ensure the libraries have been enabled – follow the steps from this article:
https://www.storemapper.com/support/knowledge-base/add-apis-to-your-google-maps-api-key/

2. Http Referer Not Allowed
ReferrerNotAllowed
Error Description: This error will appear when the API was restricted to specific URLs and do not include the webpage where the store locator was placed

Resolution Steps: To add your referer URL into your API settings follow the steps at the following article (starting from Step 11)
https://www.storemapper.com/support/knowledge-base/how-to-add-a-google-maps-api-key-to-your-store-locator/#referer

3. Enable Billing Account
NoGoogleBilling
Error Description: This error appears when a Billing account is not linked to the Project where the API key used in your Storemapper account is located

Resolution Steps: To create and connect your billing account follow the steps from the following article:
https://www.storemapper.com/support/knowledge-base/how-to-add-billing-account-to-your-google-project/

4.Geocoding Service
Geocoding Service API Error 
Error Description: This error appears when the Geocoding service is not enabled for the API key

To fix this follow the steps in the following article to enable the Geocoding API: https://www.storemapper.com/support/knowledge-base/add-apis-to-your-google-maps-api-key/

 

If you are using Mapbox you may see the following:

Mapbox Error : No Token issue   

Error Description: This error means that you have selected Mapbox as a map provider in your account settings, but you have not added your mapbox token.

Resolution Steps:
Follow steps from this article (https://www.storemapper.com/support/knowledge-base/how-to-add-mapbox-token-to-your-store-locator/) to add mapbox token.

If the above didn’t resolve your issue, reach out to us at help@storemapper.co

Was this article helpful?

Related Articles

Submit a Comment

Your email address will not be published.