He estado tratando de rotar el símbolo del avión SVG API de Google Maps para que muestre el rumbo correcto del avión cada vez que se mueve el símbolo. Inicialmente se carga mostrando el encabezado correcto; parece que no puedo encontrar la manera de actualizarlo al nuevo encabezado. He pasado 2 días intentándolo y fallando mucho. Pensé que podría cambiarlo simplemente agregandorotatation: getTrueHeading Pero no tanta suerte.

La única forma en que puedo lograr que haga lo que quiero es agregando la instancia planeSymbol y la instancia del marcador en el

setInterval(function() {}, 3000); 

funcionan hacia abajo pero esto (obviamente) duplica el ícono del avión y parece muy ineficiente.

Aprecio que el código a continuación no sea muy bueno, así que disculpe su calidad, todavía hay mucho trabajo en progreso y también soy muy nuevo en javascript.

Si alguien pudiera ayudar, estaría muy agradecido.

function initMap() {
		
	var getLatEl = document.getElementById('latitude');
	getLat = parseFloat(getLatEl.innerHTML);
	
    var getLongEl = document.getElementById('longitude');
	getLong = parseFloat(getLongEl.innerHTML);	
	
    var gettrueHeadingEl = document.getElementById('trueHeading');
	getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
			
	if (isNaN(getLat) == true && isNaN(getLong) == true) {	

		  // Show default location	  
		  var usersLocation = {lat: 33.949484, lng: -118.430566};
		  var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 3,
			center: usersLocation,
			mapTypeId: google.maps.MapTypeId.TERRAIN
		  });		  
		  var image = 'assets/images/icons/aircraft_marker_map_none_16x16.png';
	  
	}else if (isNaN(getLat) == false && isNaN(getLong) == false) {
	
		  // Show flight sim location
		  var usersLocation = {lat: getLat, lng: getLong};
		  var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 14,
			center: usersLocation,
			mapTypeId: google.maps.MapTypeId.TERRAIN
		  });			  
		  var image = 'assets/images/icons/aircraft_marker_map_16x16.png';
	  
	}
	
		 var planeSymbol = {
			path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
			scale: 0.0333, 
			strokeOpacity: 1,
			color: 'black',
			strokeWeight: 1,
			rotation: getTrueHeading
		 };	
		 
		
		var marker = new google.maps.Marker({
			id: "player",
			position: usersLocation,
			map: map,
			title: 'Username',
			icon: planeSymbol
	
		 });	 
		 
		 //
		 
	  	// Move players aircraft
		setInterval(function() {
			
		var getLatEl = document.getElementById('latitude');
		getLat = parseFloat(getLatEl.innerHTML);
		var getLongEl = document.getElementById('longitude');
		getLong = parseFloat(getLongEl.innerHTML);	
	var gettrueHeadingEl = document.getElementById('trueHeading');
	getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
		
		 var planeSymbol = {
			path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
			scale: 0.0333, 
			strokeOpacity: 1,
			color: 'black',
			strokeWeight: 1,
			rotation: getTrueHeading
		 };	
		 
		
		var marker = new google.maps.Marker({
			position: usersLocation,
			map: map,
			title: 'Username',
			icon: planeSymbol
	
		 });		
		
		marker.setPosition( new google.maps.LatLng( getLat, getLong ) );	
		map.panTo( new google.maps.LatLng( getLat, getLong ) );

		}, 3000);	
		
	  
	}
	
	marker.setMap( map );
    moveAircraft( map, marker );	

    </script>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEYREMOVED&callback=initMap" async defer>
    </script>
	<!--/Google Map API -->   
    
	<!-- Move Aircraft to Flight Sim Location -->
	<script>
    function moveAircraft( map, marker ) {
        
        var getLatEl = document.getElementById('latitude');
        getLat = parseFloat(getLatEl.innerHTML);
        var getLongEl = document.getElementById('longitude');
        getLong = parseFloat(getLongEl.innerHTML);
        
        marker.setPosition( new google.maps.LatLng( getLat, getLong ) );
        map.panTo( new google.maps.LatLng( getLat, getLong ) );
    
    };
    </script>