It looks to me like your HTTP Referrer restriction should look like
*.clearwatershuffleboard.com/*
With the value you’ve specified, you’ll only be allowing access to the key from your home page.
That said, if it isn’t working when *unrestricted*, that seems like a more unusual case. What is the specific error you’re getting when the key is unrestricted?
I updated the HTTP Referrer as you pointed out. Still get the same error, with either a restricted key or an unrestricted key:
Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.
You can see the error on my frontend here:
https://clearwatershuffleboard.com/locations/clearwater-shuffleboard-club/
I get the same error displayed on the backend, under My Calendar/Locations/My Location.
(I’m using Google Chrome as my browser. Tried it in MS Edge as well – same error.)
I figured out how to view the error in the Javascript console. Here’s what it shows (except I replaced my Maps Key with asterisks):
JQMIGRATE: Migrate is installed, version 3.3.2
js?v=3&key=******************&ver=6.0.1:66 Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://clearwatershuffleboard.com/locations/clearwater-shuffleboard-club/
_.ne @ js?v=3&key=******************&ver=6.0.1:66
DevTools failed to load source map: Could not load content for chrome-extension://hnfanknocfeofbddgcijnmhnfnkdnaad/content.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not parse content for https://clearwatershuffleboard.com/locations/clearwater-shuffleboard-club/requestProvider.js.map: Unexpected token < in JSON at position 0
Well, that’s weird. I just tried the unrestricted key again and it is working properly now. I am 100% certain that I tried the unrestricted key multiple times and it had given the same error. I kept switching back and forth between the keys, trying the Location links in my site, and kept getting the error. And the error showed up with the unrestricted key in the first place. Now it works again with the unrestricted key, and there is nothing else I changed. I have no good explanation
It also works now with a restricted key that has the API restrictions but not the HTTP Referrer restrictions – which isn’t something I tried before.
Curious. I guess I’d consider this resolved at this point; but let me know if not.
Thanks, Joe. It’s working now with the API-restricted Key, so I suppose this is a resolved issue.
But I’d really like to also have it working with the HTTP-Referrer restricted Key. Now that Google Cloud Credentials is monetized, there is a real risk of someone stealing the API Key from the Javascript and using it for their own, thereby running up a bill on my account. The HTTP-Referrer restriction would prevent that. I’m not sure if it is your plug-in coding that causes the error when implementing the HTTP-Referrer restriction, or it’s something in Google Cloud Console.
The JS error I get on my website frontend when I use the HTTP-Referrer restriction is:
js?v=3&key=************&ver=6.0.1:66 This IP, site or mobile application is not authorized to use this API key.
I’ve added all of these HTTP Referrers to my API Key:
*.clearwatershuffleboard.com/*
https://clearwatershuffleboard.com/locations/clearwater-shuffleboard-club/
clearwatershuffleboard.com/locations/clearwater-shuffleboard-club/
*/clearwatershuffleboard.com/locations/clearwater-shuffleboard-club/
When I view my Location frontend page on my website, I get the “Oops Something Went Wrong” error on the map view. But not every time. If I keep refreshing the page, I get the page without the error after about five refreshes. Then the error comes back after one or two more refreshes. Here’s my page link again:
https://clearwatershuffleboard.com/locations/clearwater-shuffleboard-club/
I’m leaving my settings in My Calendar with the HTTP-Referrer restriction key for the moment, so you can see what I mean. Hopefully you can tell whether or not it’s an issue with the plugin.
Hi again. After fixing my other issue (the “Demo: Minnesota Orchestra” location stuck), I went back to my location page. Not getting the error anymore. Not sure if they were somehow related or was something else – probably some sort of cache delay over at Google Cloud Console. In any case, will call it fully resolved now.