I'm going to share a working navigator.geolocation.watchPosition() code I used when I wanted the user to know his current location in real time (while he is walking or riding a vehicle) using his Android device or any device with a browser that supports the Geolocation API. We made this code with the help of Google Maps and jQuery.
Recommended to use a mobile device, you must allow it to get your current location, don't worry, I'm not tracking you.
You can see this code's live demo here.
Now here's our index.html code.
In my case, I used this code with an Android WebView since it should be seen inside an app I'm working on, but as I said, this will work with any device with a browser. If you have the same case as mine, you can also use this piece of android WebView code.
Just add
and inside your setWebChromeClient()...
If you were testing it with an Adroid Webview or Chrome Browser and seemed like it is not working, don't lose hope. There is always hope. :)
Here's the solution, uninstall the Chrome browser and then re-install it.
Geolocation API Specification
Geolocation.watchPosition() from Mozilla Developer Network
Don't hesitate to post your comments regarding this Geolocation watchPosition() API example code.
 |
| Today's code running in my tablet. |
Live Demo
Recommended to use a mobile device, you must allow it to get your current location, don't worry, I'm not tracking you.
You can see this code's live demo here.
Code Example
Now here's our index.html code.
<!DOCTYPE HTML>
<html>
<head>
<title>Geolocation watchPosition() by The Code of a Ninja</title>
<!-- for mobile view -->
<metacontent='width=device-width, initial-scale=1'name='viewport'/>
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<scripttype="text/javascript"src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<scripttype="text/javascript">
// you can specify the default lat long
var map,
currentPositionMarker,
mapCenter =newgoogle.maps.LatLng(14.668626, 121.24295),
map;
// change the zoom if you want
functioninitializeMap()
{
map =newgoogle.maps.Map(document.getElementById('map_canvas'), {
zoom: 18,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
functionlocError(error) {
// tell the user if the current position could not be located
alert("The current position could not be found!");
}
// current position of the user
functionsetCurrentPosition(pos) {
currentPositionMarker =newgoogle.maps.Marker({
map: map,
position: newgoogle.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Position"
});
map.panTo(newgoogle.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
functiondisplayAndWatch(position) {
// set current position
setCurrentPosition(position);
// watch position
watchCurrentPosition();
}
functionwatchCurrentPosition() {
var positionTimer =navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
functionsetMarkerPosition(marker, position) {
marker.setPosition(
newgoogle.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
}
functioninitLocationProcedure() {
initializeMap();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
} else {
// tell the user if a browser doesn't support this amazing API
alert("Your browser does not support the Geolocation API!");
}
}
// initialize with a little help of jQuery
$(document).ready(function() {
initLocationProcedure();
});
</script>
</head>
<bodystyle="margin:0; padding:0;">
<!-- display the map here, you can changed the height or style -->
<divid="map_canvas"style="height:25em; margin:0; padding:0;"></div>
</body>
</html>
In my case, I used this code with an Android WebView since it should be seen inside an app I'm working on, but as I said, this will work with any device with a browser. If you have the same case as mine, you can also use this piece of android WebView code.
Just add
webSettings.setGeolocationEnabled(true);
and inside your setWebChromeClient()...
@Override
publicvoid onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
super.onGeolocationPermissionsShowPrompt(origin, callback);
callback.invoke(origin, true, false);
}
Issues Encountered
If you were testing it with an Adroid Webview or Chrome Browser and seemed like it is not working, don't lose hope. There is always hope. :)
Here's the solution, uninstall the Chrome browser and then re-install it.
Further Reading
Geolocation API Specification
Geolocation.watchPosition() from Mozilla Developer Network
Don't hesitate to post your comments regarding this Geolocation watchPosition() API example code.