Google Browser Key Not Working with Add-On but Works with Google Generated iframe
Permalink Browser Info Environment
Your Google Map Browser API Key enabled add-on is getting the Google message:
"Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details."
I can find that your add-on adds the following code at the bottom of the page...
Yet I can get a Google Map which is supplied by Google using the same key to display with no problems...
"Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details."
I can find that your add-on adds the following code at the bottom of the page...
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8o2NNI0uCsA4HbIC2c8dvSSRGmss3lG4&libraries=places"></script>
Yet I can get a Google Map which is supplied by Google using the same key to display with no problems...
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJq3POONmKWYgROzh24zdjr8A&key=AIzaSyB8o2NNI0uCsA4HbIC2c8dvSSRGmss3lG4" allowfullscreen></iframe>
| Type: | Pre-Sale |
|---|---|
| Status: | Resolved |
I do have the key. AIzaSyB8o2NNI0uCsA4HbIC2c8dvSSRGmss3lG4 It is valid and active.
I know this to be true because the key works for the iframe code that Google provides using the same key - the iframe map from Google loads and displays and works:
This is the same key I place in the "Google Maps API Key" field in your add-on. Please see attached photos...
What am I missing?
I know this to be true because the key works for the iframe code that Google provides using the same key - the iframe map from Google loads and displays and works:
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJq3POONmKWYgROzh24zdjr8A&key=AIzaSyB8o2NNI0uCsA4HbIC2c8dvSSRGmss3lG4" allowfullscreen></iframe>
This is the same key I place in the "Google Maps API Key" field in your add-on. Please see attached photos...
What am I missing?
Hi,
I just applied your API key to a test version of the Styled Maps add-on and it shut down all the maps on the page with the 'Oops! Something went wrong' screen.
I then switched out your API key with another key I have and it all went back to working again.
Additionally, I tried to run a jsfiddle of the iframe you posted but it sends back this error;
The Google Maps API server rejected your request. This IP, site or mobile application is not authorized to use this API key. Request received from IP address 203.7.36.27, with referer:https://fiddle.jshell.net/_display/...
It seems this may have to do with the API libraries associated with your key.
A Google Maps API key can have a number of different libraries associated with it depending on what the key is going to be used for.
The Styled Maps add-on makes use of the Google places API library so that library must be assigned to the API key that is to be used.
You can add API libraries to your key from the library tab inside the API manager. (please see attached image).
Could you please try adding the 'Google places API web service' to your key and then try it again to see if that fixes the issue.
Alternatively, you can create a new key by following the steps in the link below and then trying the new one with the add-on to see if this resolves your issue.
https://www.concrete5.org/marketplace/addons/styled-maps/how-to-get-...
Following the steps in the link above should yield a key that has the correct library associated with it as we will be creating the key from the Google places API key page.
Hopefully, we're on the right track here.
Let me know how it goes.
Cheers,
Adam.
I just applied your API key to a test version of the Styled Maps add-on and it shut down all the maps on the page with the 'Oops! Something went wrong' screen.
I then switched out your API key with another key I have and it all went back to working again.
Additionally, I tried to run a jsfiddle of the iframe you posted but it sends back this error;
The Google Maps API server rejected your request. This IP, site or mobile application is not authorized to use this API key. Request received from IP address 203.7.36.27, with referer:https://fiddle.jshell.net/_display/...
It seems this may have to do with the API libraries associated with your key.
A Google Maps API key can have a number of different libraries associated with it depending on what the key is going to be used for.
The Styled Maps add-on makes use of the Google places API library so that library must be assigned to the API key that is to be used.
You can add API libraries to your key from the library tab inside the API manager. (please see attached image).
Could you please try adding the 'Google places API web service' to your key and then try it again to see if that fixes the issue.
Alternatively, you can create a new key by following the steps in the link below and then trying the new one with the add-on to see if this resolves your issue.
https://www.concrete5.org/marketplace/addons/styled-maps/how-to-get-...
Following the steps in the link above should yield a key that has the correct library associated with it as we will be creating the key from the Google places API key page.
Hopefully, we're on the right track here.
Let me know how it goes.
Cheers,
Adam.
(*In reference to my first reply)
Disregard the comment about that key being used to generate the locations on the form.
Quite a number of the characters at the beginning of your key are identical to the one used in the add-on.
At first glance I figured you were referencing the autocomplete API key and not your own.
Disregard the comment about that key being used to generate the locations on the form.
Quite a number of the characters at the beginning of your key are identical to the one used in the add-on.
At first glance I figured you were referencing the autocomplete API key and not your own.
I followed your directions again and this time I got a key that works.
Thank you for your help!
Google really does not make it easy to understand the API key procurement process.
Thank you for your help!
Google really does not make it easy to understand the API key procurement process.
Awesome!
I know, the Google API libraries are a little bit confusing and not quite clear that you can assign them to your key.
Glad to hear that it is all working now as it should.
Regards,
Adam
I know, the Google API libraries are a little bit confusing and not quite clear that you can assign them to your key.
Glad to hear that it is all working now as it should.
Regards,
Adam
The key you refer to is only used to generate the location autocomplete field when creating a new map.
You will still need to add your own API key.
You may already have your own API key but just in case, please see the link below for details on how to get an API key.
https://www.concrete5.org/marketplace/addons/styled-maps/how-to-get-...
The error you received is known to happen if updating the add-on from a version that was pre Google maps API update (prior to v1.2.0 / before June 22).
Essentially, you can fix the issue by deleting the current map, clearing your cache and then re-create a new version of the map on the page.
You can view the documentation about this issue on the add-on page here,
https://www.concrete5.org/marketplace/addons/styled-maps/map-not-sho...
If this does not help fix your issue then please let me know and I will look further into it.
Regards,
Adam