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!
Hi there, great tutorial.
Can you post the css file to give it a shot?
Best regards
I cant download fro jquery website, its not more available.
So I choose:
I am seeing the html on my mobile (android) and GPS start good, the only problem I see its the entire area for google map refresh every time to detect the new location.
Its possible just to refresh the geolocation point, not entire google map area? Will be better if the google map window doesnt appear and desappear each time to get the new geoposition.
Best regards.
JQuery website is live and you can download the library anytime orelse use any of the CDN hosted files
Example:
Try using Google Chrome on your mobile. It works great with Chrome on my Sony Xperia Arc.
The Map doesn’t seem to reload on my Chrome. Please install Chrome on your phone and test it and let us know..
I had use explorer and chrome on mi mobile and tablet but every time the current locations updates the ggogle map refresh too. I cant find a way to refresh just the marker and keep the zoom and google map window.
Thanks for your answer.
I found too, my mobile freeze couple times after use real time location html on firefox, and reestar automatically.
Anybody there to help me?
The google maps autorefresh when i use mobile data (internet for mobile) on my mobile, i can see my real time position position but map never stop to autorefresh like marker.