How to Move Marker Along Polyline Using Google Map

Move marker along with road or on the ployline on Google Map

Flutter- How to move marker along polyline using google map

after searching, this package solved my problem line_animator I used it with the flutter_map package and its works fine

Animate or Move marker along with rout path on GoogleMap

How to Move marker exactly along Polyline?

I am not familiar with a library or similar that can give you this, so I will outline a manual approach you can use to do this rather easily.

To move the marker across the polyline you will need to calculate the steps the marker needs to take from each point in order to reach the next point.

One option is to do the following for each individual line that defines the polyline:

1) Define a line f(x) = ax + b for each 2 points
You can read further here if you need help in calculating the slope of the line (a in the above equation)

2) Define the step the marker takes until it reaches the end of this line. You can divide the length of the line by a constant which will give you a constant step. This isn't ideal since it will take the same number of steps to move across short and longer lines, but its a start. Also note that the distance between 2 lat/lng points is on a sphere and not as simple as in 2 dimensions. Look at https://en.wikipedia.org/wiki/Haversine_formula for more info.

3) Put the marker on the first point (x1,y1), and move it to (x1+step, f(x1+step)).

You need to determine whether to move left or right on the line.

4) After each time you move the marker, check if it reached the end point of the current line, and then start over for the next line.

Animated Marker Positions on PolyLine

Here is one of possible solution using google.maps.geometry.spherical namespace method computeDistanceBetween(from:LatLng, to:LatLng, radius?:number). You have to include geometry library:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>

computeDistanceBetween() is used to calculate distance between points and convert them to percentages of whole distance:

// point distances from beginning in %
var sphericalLib = google.maps.geometry.spherical;

pointDistances = [];
var pointZero = lineCoordinates[0];
var wholeDist = sphericalLib.computeDistanceBetween(
                    pointZero,
                    lineCoordinates[lineCoordinates.length - 1]);

for (var i = 0; i < lineCoordinates.length; i++) {
    pointDistances[i] = 100 * sphericalLib.computeDistanceBetween(
                                    lineCoordinates[i], pointZero) / wholeDist;
    console.log('pointDistances[' + i + ']: ' + pointDistances[i]);
}

Function animateCircle() is changed so that marker is created when offset is greater then offset of specific point:

var id;
function animateCircle() {
    var count = 0;
    var offset;
    var sentiel = -1;

    id = window.setInterval(function () {
        count = (count + 1) % 200;
        offset = count /2;

        for (var i = pointDistances.length - 1; i > sentiel; i--) {
            if (offset > pointDistances[i]) {
                console.log('create marker');
                var marker = new google.maps.Marker({
                    icon: {
                        url:"https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
                        size: new google.maps.Size(7,7),
                        anchor: new google.maps.Point(4,4)
                    },
                    position: line.getPath().getAt(i),
                    title: line.getPath().getAt(i).toUrlValue(6),
                    map: map
                });

                sentiel++;
                break;
            }
        }
...

See example at jsbin.

Note: this example uses almost straight line. If you have different example then it would be better to calculate distance from point to point and get the sum of all of them. So, offset calculation should be little different: see example at jsbin.

---

Related Topics