You have a great website. Wouldn’t it be cool if you could add Google Maps to your site? There are tons of reasons why. I don’t wanna make it a long boring article so I’ll leave that topic. Let's talk about how to add Google Maps on your website. 

To begin with, you need a Google account. I hope you have one. If don’t, then create an account from HERE. You may as why? The reason is we need a JavaScript API key from Google which we can add later to our HTML code. The second job would be, log on to Google developer console. Link HERE.

Step 1

First, you need to create a project. Click on “Select a project” which is on the top bar right beside “Google APIs” logo. 

Step 2

Now, click on the big (+) sign which you’ll see on the right side of the popup screen.

Step 3

It's time to give your project a name and hit on “Create”. Your project is now ready. 

Step 4

We need a JavaScript API key so we gotta find it from the library. You’ll find it on the left side of the screen under the dashboard.

Step 5

“Google Maps JavaScript API” should appear on the front. But if it doesn’t then you can use the search bar.  

Step 6

Select “Google Maps JavaScript API” and make it “Enable”. 

Step 7

The next thing would be setting up “Credentials” that is how we find an API key. There are few ways to do it. You can create credentials from the warning box in the dashboard. Or You can select “Credentials” from the left menu bar. We’ll go with that. 

Step 8

After you go to “Credentials” tab you’ll see a “Create credentials” button. If you click on it, a popup will appear and you’ll be able to select “API Key”. Do that. 

Step 9

You should get the key, right after you clicked on “API Key”. It should look like this. 

Step 10

The hard work is done. Now you need to add the “API Key” to your site. The JavaScript code is below:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

“YOUR_KEY” should be replaced with the API key you just got. Here’s a sample HTML code to get you a clear understanding. There is a string center:new google.maps.LatLng(23.792750,90.407606), in the following code where you need to edit the latitude and longitude "(23.792750,90.407606)" of your desired area. You can get the latitude and longitude easily on Google Maps. Simply right-click on a position, and hit the "What's here" option. The latitude and longitude will be displayed separated by a comma. Take these from there.  

<!DOCTYPE html>
<html>
<body>

<h1>My Google Map</h1>

<div id="gMap" style="width:100%;height:500px;"></div>

<script>
function myMap() {
var mapProp= {
    center:new google.maps.LatLng(23.792750,90.407606),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("gMap"),mapProp);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

</body>
</html>

Hope you’ve learned something new today. I say you should give it a try. And let us know if you like it or face any issue via the comment section. Cheers!