Fahid Javid

Fahid Javid


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.

October 2017
M T W T F S S
« Jul    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Categories


How to generate Google Maps Browser API Key for your Website

Fahid JavidFahid 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.
Google Maps Browser API key

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.
Google Maps Browser API key

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.
Google Maps Browser API key

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.


Sign up for the Newsletter!

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 10
  • robert markamian
    Posted on

    robert markamian robert markamian

    Reply Author

    Hello i’m having trouble even after i followed all the directions. can you help please


    • Fahid Javid
      Posted on

      Fahid Javid Fahid Javid

      Reply Author

      Hi Robert,

      Did you add the Google Maps API Key to the right place on your site?

      Regards


  • Salvatore
    Posted on

    Salvatore Salvatore

    Reply Author

    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?


    • Fahid Javid
      Posted on

      Fahid Javid Fahid Javid

      Reply Author

      Hi Salvatore,

      May I know your site URL? So that I can check if your Google Maps API Key is properly added.

      Thanks,

      Fahid


  • Gabrod
    Posted on

    Gabrod Gabrod

    Reply Author

    Fahid,

    Same as others, followed the steps and still cannot make it work… any ideas? Thanky you


    • Fahid Javid
      Posted on

      Fahid Javid Fahid Javid

      Reply Author

      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


      • Gabrod
        Posted on

        Gabrod Gabrod

        Reply Author

        Hello,

        I believe I was able to create the key, but it didn’t work in the site.


        • Gabrod
          Posted on

          Gabrod Gabrod

          Reply Author

          Fahid,

          For some reason I got it to work, thank you anyways!


  • franklin sandoval
    Posted on

    franklin sandoval franklin sandoval

    Reply Author

    Hi. I do not get the google map, I’ve done everything and nothing


    • Fahid Javid
      Posted on

      Fahid Javid Fahid Javid

      Reply Author

      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