How to fix a map that is not loading correctly

Sometimes you open your store locator page and get bouncing pin or a development mode message on top of the map. To solve this, first let’s pretend we are web developers and try to  investigate a problem a bit to get more information. 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 the 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 AllowedReferrerNotAllowed
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 ServiceGeocoding 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 didn’t add 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 help and you are still having issues, reach out to us at help@storemapper.co

Was this article helpful?

Related Articles