post

If you are planning to add Google map to your website then this tutorial will help you along the way. It is created for people who have beginner or intermediate skills when it comes to HTML and CSS as well as a basic knowledge of the world of JavaScript.

If you want to employ Google map in your website then there are three steps involved:

  • Creating the HTML page.
  • Adding the map.
  • Getting an API key.

To do this, a web browser is necessary. You can either choose Google Chrome, Firefox, Internet Explorer and Safari depending on what platform you are using.

First step: Creating the HTML page.

 

<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 400px;
background-color: grey;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id=”map”></div>
</body>
</html>

Using this code, you will be able to create a basic page and it is up to you to add whatever content you desire to the web page. You will see that the style element will be the determinant of the size of the map that you want. During this part, the map will appear as a grey box because it has not been added yet.

Second step: Adding the map.

In order for the Google Map to load, use this code:

<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id=”map”></div>
<script>
function initMap() {
var mapDiv = document.getElementById(‘map’);
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>
<script async defer
src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>
</script>
</body>
</html>

This time there will be no grey area because it already has a map. You have the option to add properties such as the center as well as the zoom level.

Third Step: Getting an API Key.

The last step will tell you how to get authentication for your application with the help of an API key. To get the API key, search for the Google API Console. After the page has loaded, create a project and choose CONTINUE in order to enable to the API as well as ay services related to it. Go to the CREDENTIALS page and from there you will be able to click API key. Once you have retrieved it, replace the “YOUR API KEY” value found in the code above.

Then you will be able to save the file and it must end with .html. You can then check the file by opening on your browser. Once you have accomplished this, you may be able to see map illustrations from your website.