In this video tutorial, we show you how we can keep track of the visitor and locate him/her on Google Maps using geolocation API of HTML5.
This video tutorial is a continuation of previous videos, so please make sure to watch them before this:
HTML5 – Getting Started Guide
Geolocation API – Success Handler: HTML5
Geolocation API – Error Handle: HTML5
Google Maps Integration: HTML5
Adding Pin/Marker To Google Map: HTML5
Add Popup message To Google Map Pin: HTML5
JavaScript file
mySript.js
if( navigator.geolocation )
{
var optn = {
enableHighAccuracy: true,
timeout: Infinity,
maximumAge: 0
};
var watchID = navigator.geolocation.watchPosition(success, fail, optn);
}
else
$("p").html("HTML5 Not Supported");
$("button").click(function(){
if(watchID)
navigator.geolocation.clearWatch(watchID);
watchID = null;
return false;
});
Here we are setting the 3rd parameter of watchPosition() method.
We’re enabling HighAccuracy, setting timeout to Infinity – i.e., it’ll keep looking for the location information for ever or until it gets it. We can set this to some numerical value and it’ll check till then before it’ll show a “Timed out” message to the user. maximumAge is set to 0, so that it fetches new location each time it’s asked for. If we set it to Infinity, it’ll forever show the cached data and will never fetch or update the new location information.
watchPosition() is a geolocation method, which keeps watching/fetching new user location data. This would be helpful for tracking users location information in realtime.
HTML file
index.html
<!doctype html> <html> <head> <title>Geolocation API: Technotip.com</title> <meta charset="utf-8"/> <link href="css/myStyle.css" rel="stylesheet"/> <script src="js/jquery-1.10.1.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="js/myScript.js"></script> </head> <body> <p id="map"></p> <button>Stop</button> </body> </html>
We also have a stop button added to our index.html page, once the user clicks on that button, we call clearWatch() method of geolocation API and ask watchPosition() method to stop tracking the users location.
Video Tutorial: Realtime Location Tracking – Google Maps: HTML5
[youtube https://www.youtube.com/watch?v=qYFkPFtfgdI]
By combining all the things you have learnt in this Google MAPs and geolocation API video tutorial series, you can build real time location tracking applications, which returns users location on a map, pin points it. Combining this, you could store users initial and final location, store it in database, pin point both locations on Google MAP and show them the distance or route etc.
Source Code: Full JavaScript file
mySript.js
var watchID = null;
$(document).ready(function(){
var optn = {
enableHighAccuracy: true,
timeout: Infinity,
maximumAge: 0
};
if( navigator.geolocation )
navigator.geolocation.watchPosition(success, fail, optn);
else
$("p").html("HTML5 Not Supported");
$("button").click(function(){
if(watchID)
navigator.geolocation.clearWatch(watchID);
watchID = null;
return false;
});
});
function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var mapOtn={
zoom:10,
center:googleLatLng,
mapTypeId:google.maps.MapTypeId.ROAD
};
var Pmap=document.getElementById("map");
var map=new google.maps.Map(Pmap, mapOtn);
addMarker(map, googleLatLng, "Technotip.com",
"SATISH B
About Me:https://technotip.com/about/");
}
function addMarker(map, googleLatLng, title, content){
var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
};
var marker=new google.maps.Marker(markerOptn);
var infoWindow=new google.maps.InfoWindow({ content: content,
position: googleLatLng});
google.maps.event.addListener(marker, "click", function(){
infoWindow.open(map);
});
}
function fail(error)
{
var errorType={
0:"Unknown Error",
1:"Permission denied by the user",
2:"Position of the user not available",
3:"Request timed out"
};
var errMsg = errorType[error.code];
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
$("p").html(errMsg);
}
You can integrate MAPs feature into your existing application and release this module to your users and impress them by telling their location or you can show other users nearby to their location, this would amaze some, as to how you could know about the person living nearby :-)
Remember the position.coords.accuracy property, which returns the accuracy value in meters?
Using this value, show all the users present around a users location with that accuracy(position.coords.accuracy).
Happy learning!
