Google Map is the easiest way to display a map on the web page.
To display Google Map we need to get the latitude and longitude of our desired location. We need to specify our location’s latitude and longitude into the LatLng() method which is already shown in the example. At first, load the Google Maps JavaScript API and provide your API Key in key parameter.
To display Google Map we need to get the latitude and longitude of our desired location. We need to specify our location’s latitude and longitude into the LatLng() method which is already shown in the example. At first, load the Google Maps JavaScript API and provide your API Key in key parameter.
<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY">
</script>
Google Maps JavaScript API is free to create and you can get API
key from Google API Console. This step-by-step tutorial will help you to
generate an API key on Google Developer Console and get API key for Google Maps JavaScript API.
Step1:
Log in to your Google account and go to the GoogleAPI Console.
Step2:
Click Project » Create project at the top left corner to creating a project.
Step3:
Enter the Project name and click on Create.
It will take some seconds for creating a new project.
Step4:
Click the Library link on the left navigation menu.
Under the Google Maps APIs section and click Google Maps JavaScript API link.
Step5:
Click ENABLE to use Google Maps JavaScript API.
Step6:
Click on Credentials on the left navigation menu. On the Credentials page,
click Create credentials » API key.
Step7:
A dialog box will appear with your newly created API Key.
Use this API key with Google Maps JavaScript API.
Below is the sample code will embed Google map in the website.
<html>
<head>
<title>Adding Google Map on Your Website</title>
<style>
#map {
width: 50%;
height: 25%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/
js?KEY=AIzaSyBbdB5D0kwt04dHbOR45ppzdcGrXqX9lIY"></script>
<script>
var myCenter = new google.maps.LatLng(17.4410, 78.4986);
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>
</head>
<body>
<div id="map"></div>
</body>
</html>
OUTPUT:
Step1:
Log in to your Google account and go to the GoogleAPI Console.
Step2:
Click Project » Create project at the top left corner to creating a project.
Step3:
Enter the Project name and click on Create.
It will take some seconds for creating a new project.
Step4:
Click the Library link on the left navigation menu.
Under the Google Maps APIs section and click Google Maps JavaScript API link.
Step5:
Click ENABLE to use Google Maps JavaScript API.
Step6:
Click on Credentials on the left navigation menu. On the Credentials page,
click Create credentials » API key.
Step7:
A dialog box will appear with your newly created API Key.
Use this API key with Google Maps JavaScript API.
Below is the sample code will embed Google map in the website.
<html>
<head>
<title>Adding Google Map on Your Website</title>
<style>
#map {
width: 50%;
height: 25%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/
js?KEY=AIzaSyBbdB5D0kwt04dHbOR45ppzdcGrXqX9lIY"></script>
<script>
var myCenter = new google.maps.LatLng(17.4410, 78.4986);
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>
</head>
<body>
<div id="map"></div>
</body>
</html>
Step3:
Enter the Project name and click on Create.
It will take some seconds for creating a new project.
Step4:
Click the Library link on the left navigation menu.
Under the Google Maps APIs section and click Google Maps JavaScript API link.
Step5:
Click ENABLE to use Google Maps JavaScript API.
Step6:
Click on Credentials on the left navigation menu. On the Credentials page,
click Create credentials » API key.
Step7:
A dialog box will appear with your newly created API Key.
Use this API key with Google Maps JavaScript API.
Below is the sample code will embed Google map in the website.
<html>
<head>
<title>Adding Google Map on Your Website</title>
<style>
#map {
width: 50%;
height: 25%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/
js?KEY=AIzaSyBbdB5D0kwt04dHbOR45ppzdcGrXqX9lIY"></script>
<script>
var myCenter = new google.maps.LatLng(17.4410, 78.4986);
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>
</head>
<body>
<div id="map"></div>
</body>
</html>
OUTPUT:
No comments:
Post a Comment