Fahid Javid

Fahid Javid


March 2024
M T W T F S S
 123
45678910
11121314151617
18192021222324
25262728293031

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 12
  • 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


      • Robyn W Gilliam
        Posted on

        Robyn W Gilliam Robyn W Gilliam

        Reply Author

        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.


        • Fahid Javid
          Posted on

          Fahid Javid Fahid Javid

          Reply Author

          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


  • 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!


  • 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


  • 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