Adding Google Map on Your Website within 5 Minutes

Abhigyan Singh 09th Sep 2020

There are many websites in which you have seen google map in a contact page to show company location. If any organization has a website then it is mostly seen that you will find a  map on the company or organization website. Today we are going to tell you how you can add these functionalities on the website within 5 minutes. It helps to know about the company or organization location or where it is located. With the help of google location, you can easily find the distance of the organization. Follow these steps to add this functionality as follows:
1. Go to https://www.google.co.in/maps . You will find a search box on the right top type of your desired location.

2. After typing your location you will see on map all places near by your typed location. Click on particular place to find latitude and longtitude which we will use later.

3. After getting latitude and longitude, create file index.html with the following code. Here you have to replace your latitude and longitude as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding Google Map on Your Website by Discussdesk</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
//Insert Latitude and Longitude here
var myCenter = new google.maps.LatLng(Your Latitude, Your Longtitude);
function initialize(){
var mapProp = {
center:myCenter,
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"),mapProp);

var marker = new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
#map {width: 100%;height: 300px;}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>

4. Run index.html file will have the following screen according to your set latitude and longitude as shown below:

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk