Show Moving Marker On updated Route (gmaps.js)

Question

var map;
var counter = 1;
$(document).ready(function(){      
    updateMap();
    interval = setInterval(updateMap,10000);

    function updateMap() {
        $.ajax({

            url: "gettriproute?trip_id="+{{ $id }}, 

            success: function(result){ 
            if (result.latlong == 'false') {
                //alert('route not found');
                $('#map').empty();
                $('#map').append('<h1 style="text-align: center;">Route not found</h1>');
                return false;
            }

            if (result.status[0] != 'ongoing') {
                $('#map').empty();
                $('#map').append('<h1 style="text-align: center; opacity: 0.5;">Trip Completed</h1>');
                return false;   
            }

            var len = (result.latlong.length) -1;                    
            var center = Math.round(len/2);
            path = result.latlong;


            $($(result.latlong).get().reverse()).each(function(index, element) {                    

            });

            //if (counter == 1) {                    
                map = new GMaps({
                el: '#map',
                //zoom:18,
                lat: result.latlong[len][0],
                lng: result.latlong[len][1],

               });
            //   counter = counter + 1;  
            // }

            map.removeMarkers();
            map.removePolylines();

            map.drawPolyline({
                path: path,
                strokeColor: '#00B9FF',
                strokeOpacity: 0.6,
                strokeWeight: 6
            });

            map.addMarker({
                lat: result.latlong[0][0],
                lng: result.latlong[0][1],
                title: 'Start Point',

            });

            map.addMarker({
                lat: result.latlong[len][0],
                lng: result.latlong[len][1],
                rotation: 90,
                icon:'{{ asset('public/img/marker.png') }}',


            });

            // map.fitZoom({                          
            //     latLngs: result.latlong[len]
            // });

            //ajax request end braces
            },
            error: function(e) {
              console.log(e);
            }
        });
    }

});

this is my code which update the map with ajax result problem is below described any help thanks in advance

i want to show dynamic moving marker on ajax result but the map zoom in automatically. i just want to focus on end point and move marker smoothly without refreshing the map and also want to rotate car marker as per direction

Answer 1

1. To show the marker movement smoothly and stop re-initializing the map, just initialize it outside the ajax request for the first time and update the marker position using marker.setPosition(new google.maps.LatLng({lat:"",lng:""})) instead of removing and re-adding it with new co-ordinates.

marker.setPosition Google API Reference

The smoothness can be achieved via long-polling the request using setInterval (as you have implemented) frequently or WebSockets . The long-polling requests may not resolve in the given order, as it is made asynchronously. So implement a socket connection and write the co-ordinates as json objects from server and update the map using WebSocket.onMessage event handler.

2. To change the icon direction, angle needs to be calculated. This SO answer has the implementation for it (for both V2 and V3).