Home > Google Map > How to Generate Google Maps JavaScript API Key?

How to Generate Google Maps JavaScript API Key?

Google provides us many services like google music, google photos drive, Gmail, google translator, google calendar, google docs, and many more. From one of these services google also provides us google maps service for geolocation coordinates. To use this google maps service you need a javascript map API key.

So today in this tutorial, we will learn how to generate google maps javascript API key. With the help of the google maps API key, we can embed google maps on our website.

We need a google maps API key to load the google maps javascript library on the web page. When you set your google maps API key as a query parameter in the google maps script source then it will authenticate the API key. If everything is fine then it will display google maps on your website.

You can also mark the specific location in google maps using the new google.maps.Marker() function object. You just pass the position, map location, and title for mouseover.

Let’s come back to the tutorial and see how to generate the google maps javascript API key. I will show you a step-by-step guide on how you can get the map’s key.

Generate Google Maps JavaScript API Key

Follow the below steps to get the google maps API key. I will show you each step with the help of images, so you can easily understand.

  • First of all, login to your google account and go to Google Developer Console
  • Click on the “Select Project” option at top header see the following image as reference.
    generate maps api create project
  • Now you will see a popup box, so click on the “New Project” button. If you have existing project then you can select them to get the API key.
    generate maps api create new project
  • It will redirect you new page. Enter here your project name and select any organization and then click on the “Create” button.
    generate maps api create new project name and organization
  • Now click on the “Library” option from the left navigation. It will navigate you to API library page and here select the “Maps JavaScript API” library.
    Select Maps JavaScript API Library
  • Click on the “Enable” button to enable the google maps javascript API library.
    Enable Google Maps JavaScript API key
  • Now navigate to “Credential” menu from left side and then click on the “+ Create Credentials” button and select API key.
    create google maps credentials
  • When you click on the API key option then a popup box will appear and generate the google maps javascript API key for you. Now you can copy it and use it.
    generate google map api popup box

Use Google Maps JavaScript API Key

Now your google maps API is ready to use. You just have to pass this API key in the script source as a query parameter.

So set the key parameter with API key as a value in the script source and add this script into your header or footer of the website.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Embed this script in your website and then you can use google maps on your website and customize it according to documentation.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment