ETA: I've been asked to edit the question to indicate the desired behaviour. The most concise answer I can give is: I want the Googlemaps widget to function properly. As of now, it doesn't.
I don't believe this is a matter of coding so much as a matter of finding the right settings. I've created a Google Maps API and installed the key in the corresponding plugin on my site. I've gone through all the settings and restrictions in the Google Cloud Console and confirmed that they're configured properly.
Unfortunately, every time I load the page, the Google Maps widget at the upper right displays the desired map for a fraction of a second and then blinks out, showing only an error message reading "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details."
When I check the Javascript console, it says "Google Maps JavaScript API error: RefererNotAllowedMapError". And that's where I'm stuck. No matter how I adjust the API settings, I can't get around that. (I'm also having trouble rephrasing this question to comply with the Stack Overflow rules because it's telling me I need at least 10 reputation to post more than 8 links. I've removed all the links from the question, but I'm still getting that message. This is also preventing me from adding images.)
ETA: After a long chat with Google Cloud support, it turns out that the plugin I was using is not referring to the API key I created, but to an older one somewhere else in the source code. Question is, how do I find it and get rid of it? This may not answer the question I raised at first, but hopefully it'll help some other people who might be struggling with something similar.
CodePudding user response：
The API settings should be updated so you only have the domain name root and asterisk, without any 'http://' or 'https://' protocols at the beginning.
So the only entry you should need:
urbaneer.com/*
To include any subdomains (like www.*), add:
*.urbaneer.com/*
CodePudding user response：
UPDATE: It's an API key error AND a coding issue. Go to your Google Cloud account and make sure your key is unrestricted and that it includes the Maps Javascript API resource.
MAKE SURE BILLING IS ENABLED IN YOUR GOOGLE CLOUD ACCOUNT
Add the following after your googlemap div class
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkEF7NEpxGOXTGQmQhGhvlrbCCZ7J5mCo&callback=initMap&libraries=&v=weekly"
async
></script>
Delete the following from your code
<script type='text/javascript' src='//maps.googleapis.com/maps/api/js?key=AIzaSyD2pZwH92Ujq8Og_DxP0Nn1hmfF8kllHOc;sensor=false&ver=5.8' id='maps-custom-js-js-extra'></script>
Once you confirm this works restrict the key:
Add the following to your website restrictions: https: //urbaneer.com https ://urbaneer.com/* http ://urbaneer.com and http ://urbaneer.com/*