Premium Website Templates | Powered by Saptarang

Currently Reading

How to Generate and Use Google Maps API Key

Google Map Api Key Error

Getting Warning message “Missing Google API Key” in embedded google maps?

Are you feeling annoyed because suddenly the Google Maps on your website has stopped working? Not sure what happened or your broke something?

Relax! – nothing serious has happened! – Google has just updated their services and API (Application Program Interface).

Since the Google has updated their maps api and services, they now need a key from the api to authenticate your usage of google maps. Although it may sound difficult and really a technical part but its not. Its very simple to get an API key and authenticate your google map usage to enable users interact with your embedded map.

Things you need to work with this:

  • Google Account
  • A website to embed map
  • A little bit patience

Follow the Steps:

1) Login to your Gmail Account
2) Click on the following button to Get your API key.
Get Your Google API Key

Google Maps Get Api Key Button

3) Select or Create New Project

Google Maps Create Google Project Screen

4) Enter New Project Name & Click Create & Enable API button

Google Maps Create and Enable Api Screen

5) Copy the New API KEY

Google Maps Copy Google Api Key Screen

6) Add the key to your script/iframe tag

Now once you’ve got the key, lets add it to your website. There are two ways of adding google map to your website:

  1. By embedding an iframe in your website
  2. By using javascript

 

If you have embedded an iframe in your website then follow as mentioned below:

Your iframe code should be similar to this:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/undefined?origin=...&q=...&destination=...&center=...&zoom=...&key=[YOUR_KEY_GOES_HERE]" allowfullscreen></iframe>

The highlighted part i.e. [YOUR_KEY_GOES_HERE] of the code is where your key goes.


 

Now, if you have added a google map using a javascript method then follow as mentioned below:

You <script> tag should be similar to this:
<script async defer src="https://maps.googleapis.com/maps/api/js&key=[YOUR_KEY_GOES_HERE]&callback=initMap"></script>

The highlighted part i.e. [YOUR_KEY_GOES_HERE] of the code is where your key goes.

And save your file. That’s it!
You should now have a working google map on your website.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *