Detecting Browser Geolocation Info

One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can use the geolocation API to get location details!

Feature detection is the best way to confirm the Geolocation API is avilable.

if("geolocation" in navigator) {
  
 }else {
         alert("No soup for you!  Your browser does not support this feature");
 }

Click here for Demo        Download Script

They key to detecting Geolocation within your browser is the navigator.geolocation object. Use in instead of simply if(navigator.geolocation) is important because that check may initialize geolocation and take up device resources.

The navigator.geolocation.getCurrentPosition method is the driving force behind retrieving location details:

if("geolocation" in navigator) {
 navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position);
 });
   }

Once you call this method (providing it a function which will execute if your request is successful), the browser will ask the user if they will allow you to retrieve their location information:

When the user allows the website to retrieve their location information, the browser fetches the information, providing you a position object with a payload that looks like:

// "Position" object
{
   coords: { "Coordinates" object
         accuracy: 19691,
  altitude: null,
  altitudeAccuracy: null,
  heading: null,
  latitude: 17.385044,
  longitude: 78.486671,
  speed: null
     },

 timestamp: 1440484321847
}

Now you can get complete address use latitude and longitude like country,state, city, and so on..

Previously Explain about Get address from Latitude and Longitude