How do I update the locations of multiple markers in google maps using phonegap

Question

i'm newbie, i have service tracking multi car, i use timmer for receive location, but i dont know how to update old marker with new value. i'm try use delete all marker then add again, but it not smooth. plz help me. Sr for bad english

var markers = [];
var marker = [];

setInterval(function () {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
        }
        markers = [];

        $.ajax({
            type: "POST",
            contentType: "application/xml; charset=utf-8",
            url: "http://localhost:24074/WebService1.asmx/DoWork",
            data: {}, 
            dataType: "xml",
            crossDomain: true,
            processData: false,
            success: function (xml) {
                var bienSo, soHieu, soCho, vd, kd;
                $(xml).find('T_XeOnline').each(function () {
                    $(this).find("KinhDo").each(function () {
                        kd = $(this).text();
                    });
                    $(this).find("ViDo").each(function () {
                        vd = $(this).text();
                    });
                    $(this).find("BienSoXe").each(function () {
                        bienSo = $(this).text();
                    });
                    $(this).find("SoHieuXe").each(function () {
                        soHieu = $(this).text();
                    });
                    $(this).find("SoCho").each(function () {
                        soCho = $(this).text();
                    });
                    content = '<p>Biển số xe: ' + bienSo + '<br/>' +
                               'Số hiệu xe: ' + soHieu + '<br/>' +
                               'Số chỗ: ' + soCho + '<br/>' + '</p>';

                    updateMarker(vd, kd);
                });


            },
            error: function (msg, textStatus) {
                alert("Error " + msg.responseText + "" + msg.statusText + "" + XMLHttpRequest.stat);
            }
        })
    }, 5000);

 function updateMarker(lat, lng) {

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
    });

    markers.push(marker);
    addInfoWindow(marker, content);
}

Answer 1

There are no build-in function for that, but you can build you own by using the setPosition(latlng) function to update the markers' positions, and use setTimeout(myFun, delay) to wait and make it looks like it is animated.

I created the JSFiddle here.

Hopefully this help.