Move marker with current array of coordinates , google maps

Question

How to move a marker on the map using an array of coordinates
Also i need to store the current position (or the index ) of the marker in a variable
example of array:

let data = [
 ["2019-06-28T07:33:03", 37.610225, 55.651365],
 ["2019-06-28T07:33:40", 37.6107283333333, 55.6511716666667],
 ["2019-06-28T07:33:46", 37.610745,55.6510383333333],
 ["2019-06-28T07:33:47",37.610785,55.6510233333333],
 ["2019-06-28T07:33:48",37.61083,55.65103]
];

i initialized the map and draw the path using Polyline based on the array :

function initMap() {

//start position
   const startPosition ={lat:data[0][2],lng:data[0][1]}
   let map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: myLocation,             
            });
   const pathCoordinate = [];
   data.forEach(path => {
                pathCoordinate.push({
                    lat: path[2],
                    lng: path[1]
                });
            });
// draw the path
   const principePath = new google.maps.Polyline({
                path: pathCoordinate,
                geodesic: true,
                strokeColor: "#2A7884",
                strokeOpacity: 1.0,
                strokeWeight: 3,
                icons: [
                    {
                        icon: currentPosition,
                        offset: "100%"
                    }
                ]
            });
    principePath.setMap(map);
}

add an extra var in your script to keep log of your current index and keep updating it as you traverse your poly-line. now when you click pause, you know your index and you can get started from there — ahmednawazbutt, Jan 24 '20 at 17:54
but how to achieve that ? the function that i have to animate just move the symbol using offset — Aimen Aounallah, Jan 24 '20 at 18:49
Please provide a [mcve] that demonstrates the issue. You should be able to save/restore the `count` value. — geocodezip, Jan 24 '20 at 21:30
I get errors with the posted code. After working through them, I get `Uncaught ReferenceError: animateCircle is not defined`. — geocodezip, Jan 24 '20 at 23:03
If you read the [mcve] page, you will learn that you need to provide a *minimal, **complete** and reproducible example*, including a clear **problem description**. What is the issue? What doesn't work? What error do you get? etc. — MrUpsidown, Jan 25 '20 at 10:52

score 0 · Answer 1 · answered Jan 28 '20 at 04:04

You can use a for loop and change the location of the marker on every points in your array. Here is a complete fiddle that demonstrates the solution. Here's a breakdown how I do this in your code:

Add this line to create a Marker and set position on your first value of the array.

    var marker = new google.maps.Marker({
          position: pathCoordinate[0],
          map: map,
          title: 'Hello World!'
        });

Call the function that move the Marker passing the marker and pathCoordinate.

    moveMarker(marker, pathCoordinate);

The moveMarker function should contain the following: Get the length of your array.

var len = pathCoordinate.length

Create a for loop and let i start on the second value of array(which is index 1) since it will be the next point. You can also get the current value of the coordinate just like the console.log and then create a function where you set interval when you change the position of the marker in the array. I got the idea of how to set up the timeout function from this answer.

for (i = 1; i < len; i++) {
 console.log(pathCoordinate[i]);
    (function(i){
       setTimeout(function(){
        marker.setPosition(pathCoordinate[i]);
     }, 1000 * i);
   }(i)); 
}

Hope this helps!

Move marker with current array of coordinates , google maps

1 Answers1