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