CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3
user7397952
user7397952

Reputation:

How can I move marker position as the user moves?

I'm working in location tracking module using AngularJS and JavaScript. My objective is to set the position of individual user according to receiving latitude and longitude as well as moving of marker.On below code I'm getting markers but not moving. Please suggest 

var marker = new google.maps.Marker({
    position: pos,
    map: $scope.map
});
for (var k = 0; k < $scope.arr.length; k++) {
    var found = $scope.arr.some(function (el) {
        return el.from === name;
    });
    if (!found) {
        $scope.arr.push({
            from: name,
            marker: marker,
            latitude: $scope.LocInfor.latitude,
            longitude: $scope.LocInfor.longitude
        });
    }
    var pos = new google.maps.LatLng($scope.arr[k].latitude, $scope.arr[k].longitude);
    marker.setPosition(pos);
}

Upvotes: 3

Views: 1344

Answers (1)

SphynxTech
SphynxTech

Reputation: 1849

In javascript, the navigator.geolocation.watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes. You can also, optionally, specify an error handling callback function.

Syntax:

navigator.geolocation.watchPosition(success[, error[, options]])

  • success

    A callback function that takes a Position object as an input parameter.

  • error (optional)

    An optional callback function that takes a PositionError object as an input parameter.

  • options (optional)

    An optional PositionOptions object.

And, now, for your problem, you can use this code. Be care full, you should replace YOUR-API-KEY by your google's API key:

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
  <style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
   <div id="map"></div>
<script>

var map;
var marker = new google.maps.Marker({
            position: pos,
            map: map,
            title: "Test"
        });


  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    getLocationUpdate ();
  }

  function showLocation(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        marker.setPosition(pos);
        map.setCenter(pos);


        alert("Latitude : " + pos.lat + " Longitude: " + pos.lng);
     }

  function errorHandler(err) {
        if(err.code == 1) {
           alert("Error: Access is denied!");
        }

        else if( err.code == 2) {
           alert("Error: Position is unavailable!");
        }
     }

     function getLocationUpdate(){
        if(navigator.geolocation){
           // timeout at 60000 milliseconds (60 seconds)
           var options = {
              enableHighAccuracy: false,
              timeout: 5000,
              maximumAge: 0
            };
           var geoLoc = navigator.geolocation;
           geoLoc.watchPosition(showLocation, errorHandler, options);
        }
     }



</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap">
</script>

Upvotes: 1

Related Questions