In this article, we will learn about How to Get Current Visitor Location using HTML5 Geolocation API in PHP. The geolocation feature in HTML5 enables you to determine the geographical coordinates of the current visitor location of your website (latitude and longitude).
This feature Get Current Visitor Location helps to provide the website visitor with a better browsing experience. For instance, you can return search results which are close to the location of the user.
Get Current Visitor Location Coordinates
Now, we’re all surrounded by smartphones that our lives can’t continue to web and applications for every need without a moment. In just few years, smartphones have developed to a large extent and now they offer a wide range of features that make our lives much easier. The Geolocation API is one of the most important additional features for location-challenged people. Most companies currently offer location-based services and, thus, this HTML5 Geolocation API needs to be integrated into PHP app.
Let’s Get Started
First, we’ll start with the code. below is the Code structure we’ll follow.
- index.html
- geocoordinates.php
Step-1: Now create a new file with index.html
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Get My Location</button> <p id="demo"></p> <h3>Your Current Location:</h3> <p id="location"></p> <p id="mapurl"></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> var x = document.getElementById("demo"); function getLocation() { x.innerHTML = "Please Wait.. We are loading your location"; if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; jQuery.ajax({ type:'POST', url:'geocoordinates.php', data:'lat='+position.coords.latitude+'&lng='+position.coords.longitude, success:function(address){ if(address){ var encodedUrl = encodeURIComponent(address); jQuery("#location").html(address); jQuery("#mapurl").html('<a href="http://maps.google.com/maps?z=12&t=m&q=loc:'+encodedUrl+'">Map Url</a>'); }else{ jQuery("#location").html('Not Available'); } } }); } </script> </body> </html> |
Note:
|
2 3 4 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This code is used for html Geolocation API function. When you need to get Geolocation information, you must use this library.
The following script is used to validate whether Geolocation API supported or not.
|
2 3 4 5 6 7 8 9 10 11 12 13 |
var x = document.getElementById("demo"); function getLocation() { x.innerHTML = "Please Wait.. We are loading your location"; if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } |
If you receive the visitor’s Geolocation information, use the function below to get format address.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; jQuery.ajax({ type:'POST', url:'geocoordinates.php', data:'lat='+position.coords.latitude+'&lng='+position.coords.longitude, success:function(address){ if(address){ var encodedUrl = encodeURIComponent(address); jQuery("#location").html(address); jQuery("#mapurl").html('<a href="http://maps.google.com/maps?z=12&t=m&q=loc:'+encodedUrl+'">Map Url</a>'); }else{ jQuery("#location").html('Not Available'); } } }); } |
Step-2: Now create geocoordinates.php file
geocoordinates.php Ajax code will help to find visitor’s address using Geolocation Coordinates.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php if(isset($_POST['lat'], $_POST['lng'])) { $lat = $_POST['lat']; $lng = $_POST['lng']; $url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='.trim($lat).','.trim($lng).'&sensor=false&key=YOUR_API_KEY'; $json = @file_get_contents($url); $data = json_decode($json); $status = $data->status; if($status=="OK"){ $location = $data->results[0]->formatted_address; }else{ $location = 'No location found.'; } echo $location; } ?> |
Note:
|
2 3 4 |
https://maps.googleapis.com/maps/api/geocode/json?latlng='.trim($lat).','.trim($lng).'&sensor=false&key=YOUR_API_KEY |
YOUR_API_KEY= you need to replace this with your google map API Key.
Code Output:
ALSO SEE: How to move animated marker smoothly using Google Map Javascript API
Conclusion:
Getting site visitor position details using the HTML5 geolocation API is fairly simple. Uses the methods packed into the object navigator.geolocation — watchPosition().
Are you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
