Get visitor location using HTML5 Geolocation API and PHP


Many times you need to track the visitor’s location as per your web project requirement. In this tutorial we’ll show you the simplest way to getting the user current location. Using HTML5 and PHP, you can easily track your website visitor’s country, state, city, location, and zipcode.

The helping of HTML5 Geolocation API, you can get the geographical position of a visitor. But this will work if the visitor approves it. Once you get the visitor latitude and longitude by HTML5 Geolocation API, you can get the location from it by Google Maps API.

get-visitor-location-using-html5-geolocation-api-php-by-codexworld

Using our simple script, you can be able to integrate visitor location tracking functionality in your project within 5 minutes. We’ll use only two files index.html and getLocation.php to get the visitor location.

index.html File

At first, we’ll get the visitor’s latitude and longitude using HTML5 Geolocation API. After that we’ll get the visitor’s address from the getLocation.php file using Ajax. Once the response is received from the getLocation.php file, we’ll display the visitor’s location into target (#location) area.

JavaScript:
getCurrentPosition() method is used to get the visitor’s position. showLocation() method is used to getting the visitor’s address from getLocation.php file using Ajax.

<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showLocation);
    } else { 
        $('#location').html('Geolocation is not supported by this browser.');
    }
});

function showLocation(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    $.ajax({
        type:'POST',
        url:'getLocation.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#location").html(msg);
            }else{
                $("#location").html('Not Available');
            }
        }
    });
}
</script>

HTML:
The visitor’s location will be displayed at the #location span.

<p>Your Location: <span id="location"></span></p>

getLocation.php File

In this file we’ll get the address from latitude and longitude using Google Maps API. Then we’ll send the response into the Ajax success function.

<?php
if(!empty($_POST['latitude']) && !empty($_POST['longitude'])){
    
//Send request and receive json data by latitude and longitude
    
$url 'http://maps.googleapis.com/maps/api/geocode/json?latlng='.trim($_POST['latitude']).','.trim($_POST['longitude']).'&sensor=false';
    
$json = @file_get_contents($url);
    
$data json_decode($json);
    
$status $data->status;
    if(
$status=="OK"){
        
//Get address from json data
        
$location $data->results[0]->formatted_address;
    }else{
        
$location =  '';
    }
    
//Print address 
    
echo $location;
}
?>

16 Comments

  1. Uday Said...
  2. Mike Said...
  3. Pradeep Said...
  4. Moshiur Said...
  5. TAHA Said...
  6. Alpesh Solanki Said...
  7. Sudip Bhakat Said...
  8. Pawan Said...
  9. Isaac Said...
  10. Varun Said...
  11. Mohamed Adel Said...
  12. Danish Said...
    • CodexWorld Said...

Leave a reply

Connect With CodexWorld