How to generate Google Maps Browser API Key for your Website
Since June 2016, Google Maps requires a special Google Maps browser API key when you need to display Google Maps on your site.
Without setting API key or setting an invalid Key, you’ll see the following error:
Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.
Generating a Google Maps browser API key
Obtaining a Google Maps browser API key from Google is a free service and you can generate it by following the four steps given below.
1) After logging in your Google account go to Google API Console.
2) Create a new project or select an existing project then click on Continue to enable the API and any related services.
3) On the Credentials page, Give a name to remember your API Key reference. Then choose an appropriate option, where you want to use the Google Maps API Key as displayed in the following screenshot.
4) Copy the generated Google Maps browser API key from the popup, this you will need to set to your Plugin or Theme in the API Key field.
You can ask any relevant question or just tell me if you face any issue in setting up your Google Maps browser API key, through the comments section below.
[mc4wp_form id=”800″]
Hi. I do not get the google map, I’ve done everything and nothing
Hi,
To display a Google Map you also would need to provide the latitude, longitude and zoom values through your theme settings alongside Google Maps API Key.
Regards
Could you detail how I would go about providing the latitude, longitude, and zoom values?
I followed the instructions above however I still have no maps, either on my contact page or property listings.
Hi there,
These latitude, longitude and zoom values will be added through the theme or plugin settings.
If you don’t know where those settings are then I will recommend you to ask your plugin/theme author for it.
Thanks
Fahid,
Same as others, followed the steps and still cannot make it work… any ideas? Thanky you
Hi,
May I now where are you stuck exactly? You couldn’t generate an API key or you could generate it but it didn’t work on your site?
Regards
Hello,
I believe I was able to create the key, but it didn’t work in the site.
Fahid,
For some reason I got it to work, thank you anyways!
Hi Fahid , nice tutorial, very clear all the steps.
However I have followed your tutorial, I get the api key, I pasted in the theme Real Homes but the map is not showing up.
Any suggestions?
Hi Salvatore,
May I know your site URL? So that I can check if your Google Maps API Key is properly added.
Thanks,
Fahid
Hello i’m having trouble even after i followed all the directions. can you help please
Hi Robert,
Did you add the Google Maps API Key to the right place on your site?
Regards