You are currently viewing Getting geo-location of current location using Google API

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

  1. Open the link google.co.in and type “generate google api key” in the textbox, then press Enter key.
  2. Right click on 1st link, then choose open link in new tab.
  3. Choose Get a Key option which is marked with red colour in following fig.
  4. Scroll down the page and then click on Get A Key button.
  1. Now Enter Project Name and click on Create and Enable API option.
  2. 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

 

Dinesh Kumar Bansal

Dinesh Kumar Bansal is an Indian Software Developer, who is working on ASP.Net, MS-SQL, SAP-ABAP technologies from last one year. His Basic Principle of developing software is, “You have to clear about, what do you want to do, how can it be done”. He always says that development can be done with a cool & fresh mind.

Leave a Reply