Integrating HTML5 Geolocation API to Obtain Visitor Location in PHP

0
Shares
Integrating HTML5 Geolocation API to Obtain Visitor Location in PHP
4 (80%) 7 votes

Today, we’re all surrounded by smartphones with which our lives cannot continue without instant to web and apps for each need. Smartphones have evolved to a great extent in just three years, and now they provide a wide range of features that make our lives far easier. And for the location-challenged people, Geolocation API is one of the most useful additions. Many businesses today provide services based on location and therefore, it’s necessary to integrate this HTML5 Geolocation API in PHP site.

Moreover, smartphones today, both Android and iPhone devices have been fitted with GPS to provide geographical location data, and in this PHP tutorial, we’ll discuss the capabilities of Geolocation API of HTML5.

Let’s Get Started

To obtain visitor location, we’ll need the following.

  1. CODE
  2. PHP

First, we’ll start with the code. Here’s the Code structure we’ll follow.

  1. Index.html
  2. GetLocation.php

Now create a new file with index.html to display the output.

NOTE: Define your browser version with name for Geolocation API functionality support.

Chrome

Version 5.0 to 49 support with http protocol.

Version greater than 50 support only with https protocol.

Internet Explorer

Support version greater than 9.0

Mozilla Firefox

Support version greater than 3.5

Safari

Support version greater than 5.0

Operamini

Support version greater than 16.0

All these browser are available in the market.

Start Code Integration

  • HTML
<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<title>SPACE-O :: Get Visitor Location using HTML5</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/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> 

<style type="text/css"> 

p{ border: 2px dashed #009755; width: auto; padding: 10px; font-size: 18px; border-radius: 5px; color: #FF7361;} 

    span.label{ font-weight: bold; color: #000;} 

</style> 

</head> 

<body> 

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

</body> 

</html>

NOTE:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

This code is used for Geolocation API function. When you need to get Geolocation information, you must use jquery.min.js

The following code is to validate whether Geolocation API supported or not.

<script> 

$(document).ready(function(){ 

    if (navigator.geolocation) { 

        navigator.geolocation.getCurrentPosition(showLocation); 

    } else { 

        $('#location').html('Geolocation is not supported by this browser.'); 

    } 

}); 

If you get the Geolocation details of visitor, then call the below function to get format address.

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> 
  • GetLocation.php
<?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; 

} 

?>

And Done!

So now that you know how to use Geolocation API, it’s time you take the action. And if still confused, whether to use internal geolocation service or external. The answer is simple. Use external geolocation service whenever the option is available. External service provides geolocation of visitor by using a large geolocation databases, meaning they’ll do a far better job. And in case you need help, hire PHP developer and lay out your plan and integrate Geolocation API as soon as possible.

Grab a free copy of PHP Geolocation Demo from Github.

This page was last edited on September 28th, 2018, at 3:38.
 
0
Shares
 

Want to Develop Location-Based Web Apps? Contact Us Now

Get your free consultation now