Fahid JavidNodejs and NPM have made life so easier. If you use Gulp toolkit with it I am sure you love it 😍 However, I came...
How to generate Google Maps Browser API Key for your Website
Fahid Javid
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.
My name is Fahid and I’m a Full-Stack WordPress Developer. I started working with WordPress community and I’m finding myself learning something new every single day.
Comments
12
-
-
Posted on
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
-
Posted on
Robyn W Gilliam
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.
-
Posted on
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
-
-
-
-
Posted on
Gabrod
Fahid,
Same as others, followed the steps and still cannot make it work… any ideas? Thanky you
-
Posted on
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
-
-
-
Posted on
Salvatore
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?
-
Posted on
Hi Salvatore,
May I know your site URL? So that I can check if your Google Maps API Key is properly added.
Thanks,
Fahid
-
-
Posted on
robert markamian
Hello i’m having trouble even after i followed all the directions. can you help please
-
Posted on
Hi Robert,
Did you add the Google Maps API Key to the right place on your site?
Regards
-
franklin sandoval
