GMaps Animate Markers

Form stackoverflow question

by rodrigorf

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://estoquedesenv.azurewebsites.net/util/markerAnimate.js"></script>
    <div class="">
	    <div id="" style="height: 460px;">
             <div id="map_canvas" style="position: absolute; top: 10%;  left: 0%; width: 100%; height: 765px"></div>
             <div id="log"></div>			
        </div>
    </div>

JavaScript

var infoWindow = null;
        var map = null;
        var markersArray = [];
        var nextPosGPS = 0;
        var data = gerarArrayPosicoesGPS();

        initialize();

        function initialize()
        {
            var myLatlng = new google.maps.LatLng(-22.91829049, -43.18914413);
            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);

            var pink_parks = [];
            map.setOptions({
                styles: pink_parks
            });

            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap(map);

            infoWindow = new google.maps.InfoWindow;
            updateMaps();
            window.setInterval(updateMaps, 10000);
        }

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

        function updateMaps()
        {
            nextPos = nextPosGPS + 1;
            var marker = [];
            var latlng = new google.maps.LatLng(data[nextPos].x, data[nextPos].y);
            if (markersArray.length > 0)
            {
                console.log("pega do array");
                marker = markersArray[0];
                console.log("dados do marker");
            } else
            {
                console.log("cria novo marker");
                marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                });
            }
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent("");
                infoWindow.open(map, marker);
            });

           ...