Google Maps Javascript API Error "RefererNotAllowedMapError"

If your map is not displaying and your browser console shows the "Google Maps JavaScript API error: RefererNotAllowedMapError" it means the URL loading the Maps JavaScript API is not on the list of allowed referrers. Please check the referrer settings of your API key in the Google Cloud Platform Console.

1. Remove restrictions on the API key to debug

Removing any restrictions can help identify whether they're causing unexpected issues.

1. Go to the Credentials page of your Google Cloud Platform Console.
2. If you see a Maps API key under the "API Keys" header, click on the name of it to edit:
   

   

3. Remove restrictions:
   1. For "Application restrictions", set to "None"
   2. Under "API restrictions", set to "Don't restrict key"
   3. Click Save

      

Please note, It can take up to 5 minutes for your new settings to take effect, so you might have to wait a few minutes before refreshing the View and seeing the map.

2. Wait five minutes! 

3. If it works, great! You have identified that the referrer is the issue.

You won't want to leave the "API restrictions" and "Application restrictions" settings there; this will mean that others will be able to use your Maps API key anywhere, potentially costing you money.

So we now restore an "Application restriction" setting. 

1. Set "Application restriction" to "HTTP referrers"

2. Click "ADD AN ITEM"

   

3. Set "Referrer" to *.yoursite.com/* — make sure to replace "yoursite.com" with your domain (without www.!). This will allow the API to run on all the variations of your website (www.example.com, example.com, subdomain.example.com).
4. If you have another site you want the maps to work on, click on "ADD AN ITEM" again to add another site.
5. Save the settings again
6. Wait five minutes
7. If your site still doesn't work, try using the "IP addresses" restriction and entering the IP address of your server. Then (yep) wait another five minutes :-)

If everything still works on your site, set "API restrictions"

1. Under "API restrictions", select "Restrict key"

2. Check the "Geocoding API" , "Maps Javascript API", and "Places API" checkboxes (see image below)

   
   

   

3. Save the settings
4. Wait another five minutes!

These settings should continue to work—if they don't, check all the boxes in the list, save, and wait five minutes. If it works again, then deselect one checkbox at a time and see which one makes things not work!