I am trying to plot the visited path as a mapped route is played through, as in the following example:

When a map is loaded I want the plotted points A, B, C, D, E, and then F to connect one after another.

I have successfully plotted the points, but I cannot dynamically link the points one after another.

This is my code:

<script type=text/javascript>

var markers = [{

    title: 'Alibaug',

    lat: '12.97721863',

    lng: '80.22206879',

    description: 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.'

}, {

    title: 'Mumbai',

    lat: '12.9962529',

    lng: '80.2570098',

    description: 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'

}, {

    title: 'Pune',

    lat: '12.97722816',

    lng: '80.22219086',

    description: 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'

}];

window.onload = function() {

    var mapOptions = {

        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),

        zoom: 10,

        mapTypeId: google.maps.MapTypeId.ROADMAP,};

    var map = new google.maps.Map(document.getElementById(dvMap), mapOptions);



    //*********** GOOGLE MAP SEARCH ****************//

    // Create the search box and link it to the UI element.

    var input = /** @type {HTMLInputElement} */ (

        document.getElementById('pac-input'));

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);



    var searchBox = new google.maps.places.SearchBox(

        /** @type {HTMLInputElement} */

        (input));

    // Listen for the event fired when the user selects an item from the

    // pick list. Retrieve the matching places for that item.

    google.maps.event.addListener(searchBox, 'places_changed', function() {

        var places = searchBox.getPlaces();



        for (var i = 0, marker; marker = markers[i]; i++) {

            // marker.setMap(null);

        }



        // For each place, get the icon, place name, and location.

        markers = [];

        var bounds = new google.maps.LatLngBounds();

        var place = null;

        var viewport = null;

        for (var i = 0; place = places[i]; i++) {

            var image = {

                url: place.icon,

                size: new google.maps.Size(71, 71),

                origin: new google.maps.Point(0, 0),

                anchor: new google.maps.Point(17, 34),

                scaledSize: new google.maps.Size(25, 25)

            };



            // Create a marker for each place.

            var marker = new google.maps.Marker({

                map: map,

                icon: image,

                title: place.name,

                position: place.geometry.location

            });

            viewport = place.geometry.viewport;

            markers.push(marker);



            bounds.extend(place.geometry.location);

        }

        map.setCenter(bounds.getCenter());

    });

    // Bias the SearchBox results towards places that are within the bounds of the

    // current map's viewport.

    google.maps.event.addListener(map, 'bounds_changed', function() {

        var bounds = map.getBounds();

        searchBox.setBounds(bounds);

    });

    //***********Google Map Search Ends****************//





    var infoWindow = new google.maps.InfoWindow();

    var lat_lng = new Array();

    var latlngbounds = new google.maps.LatLngBounds();

    for (i = 0; i < markers.length; i++) {

        var data = markers[i]

        var myLatlng = new google.maps.LatLng(data.lat, data.lng);

        lat_lng.push(myLatlng);

        var marker = new google.maps.Marker({

            position: myLatlng,

            map: map,

            title: data.title

        });

        latlngbounds.extend(marker.position);

        (function(marker, data) {

            google.maps.event.addListener(marker, click, function(e) {

                infoWindow.setContent(data.description);

                infoWindow.open(map, marker);

            });

        })(marker, data);

    }

    map.setCenter(latlngbounds.getCenter());

    map.fitBounds(latlngbounds);



    //***********ROUTING****************//



    //Initialize the Path Array

    var path = new google.maps.MVCArray();



    //Initialize the Direction Service

    var service = new google.maps.DirectionsService();



    //Set the Path Stroke Color

    var poly = new google.maps.Polyline({

        map: map,

        strokeColor: '#4986E7'

    });



    //Loop and Draw Path Route between the Points on MAP

    for (var i = 0; i < lat_lng.length; i++) {

        if ((i + 1) < lat_lng.length) {

            var src = lat_lng[i];

            var des = lat_lng[i + 1];

            path.push(src);

            poly.setPath(path);

            service.route({

                origin: src,

                destination: des,

                travelMode: google.maps.DirectionsTravelMode.DRIVING

            }, function(result, status) {

                if (status == google.maps.DirectionsStatus.OK) {

                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {

                        path.push(result.routes[0].overview_path[i]);

                    }

                }

            });

        }

    }

}



function handleLocationError(browserHasGeolocation, infoWindow, pos) {

    infoWindow.setPosition(pos);

    infoWindow.setContent(browserHasGeolocation ?

        'Error: The Geolocation service failed.' :

        'Error: Your browser doesn't support geolocation.');

}

Output will be similar to:

How can I play back showing the points along this mapped route? Is there any working example?