In this article, we will discuss getting current geo-location of your place. For getting current geo-location of your place in the form of longitude and latitude, we use Google API. For this, you have to generate a key.
Steps to Generate Google API key
- Open the link google.co.in and type “generate google api key” in the textbox, then press Enter key.
- Right click on 1st link, then choose open link in new tab.
- Choose Get a Key option which is marked with red colour in following fig.
- Scroll down the page and then click on Get A Key button.
- Now Enter Project Name and click on Create and Enable API option.
- After sometime, your api key will generate , now copy the highlighted key as shown in figure and use it in your project in javascript code where it is rerquired.
[sc name=”responsiveadsensebanner” ]
Source Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
http://Scripts/jquery-1.4.1-vsdoc.js
http://Scripts/jquery-1.4.1.js
http://Scripts/jquery-1.4.1.min.js
https://maps.googleapis.com/maps/api/js?key=AIzaSyA-Ohtnmw3oor9WTXF1CwyTE_CgDaUDjoE&sensor=false
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
alert("Geo Location is not supported on your current browser!");
}
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var city = position.coords.locality;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: "lat: " + lat + " long: " + long
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ content: "User Address
Latitude:" + lat + "
Longitude:" + long + "" });
infowindow.open(map, marker);
}
</head>
<body>
<div>
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</div>
</body>
</html>
Output:
NOTE:- Copy the above Source Code and Replace your API key with text shown in red color:-
https://maps.googleapis.com/maps/api/js?key=AIzaSyA-Ohtnmw3oor9WTXF1CwyTE_CgDaUDjoE&sensor=false
