HTML5 geolocation watchPosition receives a call once

Question

I am creating an android application using html 5 and I want to access latlong from the user while moving the user. I used watchPostion, but it gives me the user's location only once.

var watchID; var geoLoc; function showLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var ll=new google.maps.LatLng(latitude, longitude); map.setCenter(ll); console.log("Latitude : " + latitude + " Longitude: " + longitude); } function errorHandler(err) { if(err.code == 1) { console.log("Error: Access is denied!"); }else if( err.code == 2) { console.log("Error: Position is unavailable!"); } } if(navigator.geolocation){ // timeout at 60000 milliseconds (60 seconds) var options = {timeout:60000}; geoLoc = navigator.geolocation; watchID = geoLoc.watchPosition(showLocation, errorHandler, options); }else{ console.log("Sorry, browser does not support geolocation!"); } 

Answer 1

I worked on something similar a few months ago. I remember the same question. Perhaps this will help.

 $(document).ready(function(){ initLocationProcedure(); } function initLocationProcedure() { map = new google.maps.Map(document.getElementById('map_canvas'), { zoom : 17 }); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(displayAndWatch, locError, { enableHighAccuracy : true, timeout : 60000, maximumAge : 0 }); } else { alert("Your phone does not support the Geolocation API"); } } function displayAndWatch(position) { // set current position setUserLocation(position); // watch position watchCurrentPosition(); } function setUserLocation(pos) { // marker for userLocation userLocation = new google.maps.Marker({ map : map, position : new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), title : "You are here", icon : "../img/user-location.svg", // scroll to userLocation map.panTo(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); }); 

Here is what you are looking for

 function watchCurrentPosition() { var positionTimer = navigator.geolocation.watchPosition(function(position) { setMarkerPosition(userLocation, position); map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); }); } function setMarkerPosition(marker, position) { marker.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); console.log(position); } 

Fiddle
http://jsfiddle.net/XEFks/

Answer 2

You need to make sure that you call the Geolocation.clearWatch () method with an identifier so that it resets the location.

See an example below:

Web / API / Geolocation.watchPosition

The Geolocation.watchPosition () method is used to register a handler function that will be called automatically every time the device position changes. You can also specify the error handling callback function.

This method returns the value of the hour identifier, which can be used to unregister the handler by passing it to Geolocation.clearWatch ().

Syntax

 var id, target, option; function success(pos) { var crd = pos.coords; if (target.latitude === crd.latitude && target.longitude === crd.longitude) { console.log('Congratulation, you reach the target'); navigator.geolocation.clearWatch(id); } }; function error(err) { console.warn('ERROR(' + err.code + '): ' + err.message); }; target = { latitude : 0, longitude: 0, } options = { enableHighAccuracy: false, timeout: 5000, maximumAge: 0 }; id = navigator.geolocation.watchPosition(success, error, options); 

---

You can also try wrapping the clear function as shown below. Also, by setting it to null, it will be updated.

 // clear the watch that was started earlier // function clearWatch() { if (watchID != null) { navigator.geolocation.clearWatch(watchID); watchID = null; } } 

Answer 3

 function watchCurrentPosition() { var positionTimer = navigator.geolocation.watchPosition(function(position) { setMarkerPosition(userLocation, position); map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); }); } 

This will certainly help ..