Why isn’t my page loading the Google Maps widget?

Are you seeing this message?  This error has become more common since Google Maps started requiring an API Key back in June of 2016.  Before that time, the API Key wasn't needed.  But, times have changed and we all must follow technology where it leads us.

Unfortunately, Google hasn't made settings up an API Key a very user-friendly process.  They assumed only developers would be using it, people who are very familiar with geek-speak.  Fortunately, we at Gutensite are adept at bringing technology to our customers in a friendly way.

We could provide lengthy instructions for how to bring up the JavaScript console to see the "more details" promised in the error message.  But, we've found that most of the time this error appears it's because there's something wrong with the API Key and it just needs to be updated.  (In geek-speak, this is known as an invalid key.)

How to generate a new API Key

Because the API Key is specific to your site, this isn't something Gutensite can do for you.

1. Login to your Google account.
2. Go to https://console.developers.google.com/apis/credentials 
3. This will take you to the Google Cloud Platform Console. 
4. You'll likely be asked to create credentials.  Select "API Key" from the pull-down list.
5. A pop-up window will appear with the Key.
6. Click on the Restrict Key option.
7. Give the Key a meaningful name.
8. Select "HTTP referrers" under Application Restrictions
9. Enter the name of your website in the field asking for referrers.  
10. Save

How to Re-Generate an API Key

OK, so maybe there's already an API Key in the Google Platform Console and you need a new one.  That's really easy to do.

1. Login to your Google account.
2. Go to https://console.developers.google.com/apis/credentials 
3. You should see your API Key listed on the page. 
4. Click on the pencil icon to edit the Key.
5. Regenerate Key
6. A warning will appear to let you know the old Key will no longer be usable after 24-hours.  The new Key will be available immediately.  Go ahead and accept the warning.
7. Make sure "HTTP referrers" has been selected under Application Restrictions
8. And, you'll need the name of your website in the field asking for referrers.  
9. Save

How to Add the API Key to Your Account

1. Click on the button to the right of the API Key to copy it to the clipboard
2. Login to your Gutensite Control Panel.
3. Gutensite Control Panel --> Admin --> Tools --> Third Party
4. Paste the Key into the field for Google Maps
5. Save

How Can I Verify My API Key?

1. Replace YOUR_API_KEY with the string for API key:
   
   https://maps.googleapis.com/maps/api/js?callback=gm_Loaded&libraries=places&key=YOUR_API_KEY 
2. Load the URL into a browser
3. If you see something like below, then the key is valid:

window.google = window.google || {};
google.maps = google.maps || {};
(function() {
  
  function getScript(src) {
    var s = document.createElement('script');
    
    s.src = src;
    document.body.appendChild(s);
  }
  
  var modules = google.maps.modules = {};
  google.maps.__gjsload__ = function(name, text) {
    modules[name] = text;
  };
  
  google.maps.Load = function(apiLoad) {

If you receive an error, generate a new key.  If you continue to receive errors, please contact Gutensite Support for assistance.

Why Can't I Just Use Gutensite's API Key?

Google has changed their pricing on API Keys for Maps.  The limited-use in a single website will continue to be free, but for companies like Gutensite that have multiple sites, there are fees to pay.  We'd rather not pass those fees on to our customers, so we're encouraging everyone to have their own API Key.