JSFiddle - React, Tailwind, and code Playground

by Ravi A

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
<input type="button" value="Move"/>
<div id="map" style="width: 480px; height: 320px;"></div>

JavaScript

var markers = [];
function initialize() {
    
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: new google.maps.LatLng(59.902759, 20.861813),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var startPos = new google.maps.LatLng(60.174039, 24.940939);
    var endPos = new google.maps.LatLng(59.337174, 18.067883);
   

    // generate fake points for route
    var pointsNo = 80;
    var latDelta = (endPos.lat() - startPos.lat()) / pointsNo;
    var lngDelta = (endPos.lng() - startPos.lng()) / pointsNo;
    var positions = [];
    for (var i = 0; i < pointsNo; i++) {
        var curLat = startPos.lat() + i * latDelta;
        var curLng = startPos.lng() + i * lngDelta;
        positions.push(new google.maps.LatLng(curLat, curLng));


        var curMarker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(curLat, curLng),
            visible: false
        });
        markers.push(curMarker);
    }
}


function displayMarker(markers, index, delay) {    
    if (index > 0)
        markers[index - 1].setVisible(false);
    else {
        markers[markers.length - 1].setVisible(false);
    }

    markers[index].setVisible(true);
    if (index < markers.length - 1) {
        setTimeout(function () {
            displayMarker(markers, index + 1, delay);
        }, delay);
    } else {
       // displayMarker(markers, 0, delay);
    }
}


//google.maps.event.addDomListener(window, 'load', function() {
    initialize();
//});

$('input[type=button]').click( function() {
    var delay = 40;
    displayMarker(markers, 0, delay);
});