javascript-detect-location
Javascript Web Development

How to Detect User Location with Javascript

Lots of websites today show a dynamic content base on user’s location to provide a relevant info, ads or local places. In this article, we’re going to show you how to detect user location using Geolocation API. A pure-JavaScript way without any third-party services to retrieve accurate user location.

Geolocation API

The geolocation API allows javascript or web content to access the user’s location or device’s location. If you notice the popup notification on a website asking you for a permission to access your location, that’s the geolocation API. Since disclosing your location can compromise your privacy, web browsers will need your consent before they allow the access.

Using geolocation is very easy. You can access to user position using getCurrentPosition and use the callback function to process the returned position object.

navigator.geolocation.getCurrentPosition(callbackfunction)

However, some browsers are not supporting geolocation so you should check it first.

if (navigator.geolocation) { //check if geolocation is available
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log(position);
                });   
            }

The returned position object should look like this.

javascript-detect-location-1

So you access to latitude and longitude of the user via position.coords.latitude and position.coords.longitude

Combined with Google Maps

Getting latitude and longitude is not very much useful. So you need to reverse geocoding to get the city, country, etc. Below is the example of how to use Google Maps reverse geocoding to get the address of specified location.

$.get( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+ position.coords.latitude + "," + position.coords.longitude +"&sensor=false", function(data) {
                    console.log(data);
                  })

Below is the returned JSON of the addresses

javascript-detect-location-2

Or you can show the map of that coordinate using Google Maps API like this.

var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=13&size=800x400&sensor=false";
$('#output').html(img);

javascript-detect-location-3

Hope this helps! Feel free to leave a comment if you have any questions. And please subscribe to our Facebook and Youtube Channel to stay tune for update if you love this tutorial.

Full Source Code

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="jquery-2.1.4.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
  <div id="navbar"><span>Red Stapler - Geolocation API</span></div>
  <div id="wrapper">
    <button id="location-button">Get User Location</button>
    <div id="output"></div>
  </div>
  
  <script>
          $('#location-button').click(function(){
        
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log(position);
                  $.get( "http://maps.googleapis.com/maps/api/geocode/json?latlng="+ position.coords.latitude + "," + position.coords.longitude +"&sensor=false", function(data) {
                    console.log(data);
                  })
                  var img = new Image();
                  img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=13&size=800x400&sensor=false";
                  $('#output').html(img);
                });
                
            }

          });
  </script>
  </body>
</html>
Written By

7 comments

Leave a Reply

Your email address will not be published.

error: