Tuesday, March 29, 2016

Google Maps API Credentials - HTTP referrers (web sites) errors

When you want to embed the defacto basic Google Map into website properly you going to have to request a Google API key to manage, monitor and secure your Google map queries.

Many CMS Themes (Wodpress, Joomla, etc) are purchased and come with a non-key version of Google maps which causes errors in the console, and get blocked because they surpass the  25,000 / per day limit or are getting HTTP referrers errors.

That's right, new modern themes are using AJAX deferred api's libraries and there a big difference in requests rate granted by Google

  • Google Maps JavaScript API has 25,000 request per day (hip)
  • Google Maps Embed API has 2,000,000 request per day (old)

So you may thing on first blush according to the that you need the Google Maps Embed API but that for very old sites and now AJAX sites are using the Google Maps JavaScript API.

Check for this in your source code -

So now you are forced to upgrade to get an Google API key, but they certainly make that very easy process.

Head over to Googles Developer Console - https://console.developers.google.com/apis/credentials/ and sign-up.

You want to add Google Maps JavaScript API

Now under Credentials Tab, you be assigned a new API Key, but you have to choose your Accept requests from these HTTP referrers (web sites) to come from your website.

The prescribed *.example.com/* did not work for me! Here's what finally worked;

Now change your code to reflect your new active key, and best practice to add version of library you are using to the URL ?v3

https://maps.googleapis.com/maps/api/js?v3&key={your API key}

and follow this

If you get this then your referrer is set incorrectly, you get a browser pop-up alert with following error:

This page was unable to display a Google Maps element. Please contact the site administrator. If you are the administrator of this site, please check the JavaScript console or check the following page for troubleshooting: http://g.co/mapsJSApiErrors

check your browser console and it will indicate the offending referring URL.

Check this again; and add your website with http(s)://