Moving Marker on a PolyLine using Google Maps API v3

Introduction

In this article, we will explore how to animate a marker on a polyline using the Google Maps API v3 to achieve smooth movement of the marker without flickering or delays. We will also provide an example code and give practical tips for optimizing the process.

Problem and Original Code

The author of a question on StackOverflow encountered issues with smoothly moving a marker along a polyline. The original code animates the marker between two fixed points but does not work correctly when using a larger number of points. Here is the original code:

var map;
var path;
var marker;
function initialize() {
    var myLatlng = new google.maps.LatLng(35, -105);
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    route = new google.maps.Polyline({
        path: [new google.maps.LatLng(30, -110), new google.maps.LatLng(30, -100)],
        map: map
    });
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(30, -110),
        map: map
    });
    counter = 0;
    interval = window.setInterval(function () {
        counter++;
        var pos = new google.maps.LatLng(30, -110 + counter / 100);
        marker.setPosition(pos);
        if (counter >= 1000) {
            window.clearInterval(interval);
        }
    }, 10);
}
google.maps.event.addDomListener(window, 'load', initialize);

Analysis of Original Code

The code creates a map, a polyline, and a marker, then animates the marker from the first to the second point in the polyline. However, when increasing the number of points or the complexity of the route, the method becomes incorrect and may cause the marker to flicker.

Solving the Problem

To achieve smooth movement of the marker along a polyline, interpolation between the route points can be used. In this case, the marker will move between all points on the route, ensuring smooth movement without flickering.

Fixed Code

Here is the corrected code that animates the marker along the polyline without flickering:

var map;
var path;
var marker;
var polyline;
var step = 0;
var totalSteps;

function initialize() {
    var myLatlng = new google.maps.LatLng(35, -105);
    var myOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    // Polyline
    path = [
        new google.maps.LatLng(30, -110),
        new google.maps.LatLng(30, -105),
        new google.maps.LatLng(30, -100)
    ];
    polyline = new google.maps.Polyline({
        path: path,
        map: map
    });

    // Marker
    marker = new google.maps.Marker({
        position: path[0],
        map: map
    });

    // Marker animation
    totalSteps = path.length - 1;
    animateMarker();
}

function animateMarker() {
    if (step < totalSteps) {
        step++;
        var newPos = google.maps.geometry.spherical.interpolate(
            path[step - 1], 
            path[step], 
            step / totalSteps
        );
        marker.setPosition(newPos);
        setTimeout(animateMarker, 20); // Interval of 20ms for smooth movement
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

Explanation of the Code

1. Map Initialization: Creates a map and a polyline.
2. Marker Animation: Uses google.maps.geometry.spherical.interpolate for interpolating between route points.
3. Smooth Movement: Sets an interval of 20ms for smooth marker movement.

Practical Tips

• Use Interpolation: For smooth marker movement, use the function google.maps.geometry.spherical.interpolate.
• Intervals: Optimize intervals for smooth marker movement, avoid too short intervals to prevent flickering.
• Performance Check: When working with a large number of points, check performance and consider possible delays.

Conclusion

Using interpolation for animating a marker on a polyline allows achieving smooth movement without flickering or delays. We hope this material helps you understand the problem and solve it effectively.

SEO

---