Rotate SVG symbol to match aircraft heading using Google Maps API

Question

I've been trying to rotate the Google Maps API SVG aircraft symbol so it shows the aircraft's correct heading each time the symbol moves. It initially loads showing the correct heading - I just can't seem to work out how to update it to the new heading. I've spent 2 days trying and very much failing. I thought I'd be able to simply change it by adding rotatation: getTrueHeading but no such luck.

The only way I can get it to closely do what I want is by adding the planeSymbol instance and the marker instance in to the

setInterval(function() {}, 3000);

function towards the bottom but this (obviously) duplicates the aircraft icon and seems very inefficient.

I appreciate the code below is not very good so please excuse it's quality - still very much work in progress and I'm also very new to javascript.

If anyone could help I would be most grateful.

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>

geocodezip · Accepted Answer

Read the heading from the DOM just like you do the coordinates and use it to set the rotation property of the icon.

// read the value for the heading from the DOM
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);

// set the rotation property of the icon
marker.setPosition(new google.maps.LatLng(getLat, getLong));
var newIcon = marker.getIcon()
newIcon.rotation = getTrueHeading;
marker.setIcon(newIcon);

proof of concept fiddle

code snippet:

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: 8,
      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,
    anchor: new google.maps.Point(400, 400)
  };


  var marker = new google.maps.Marker({
    id: "player",
    position: usersLocation,
    map: map,
    title: 'Username',
    icon: planeSymbol

  });

  //
  var polyline = new google.maps.Polyline({
      map: map,
      path: []
    })
    // 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,
      anchor: new google.maps.Point(400, 400)

    };

    if (marker && marker.setPosition) {
      marker.setPosition(new google.maps.LatLng(getLat, getLong));
      var newIcon = marker.getIcon()
      newIcon.rotation = getTrueHeading;
      marker.setIcon(newIcon);
      polyline.getPath().push(marker.getPosition());
    } else {
      marker = new google.maps.Marker({
        position: usersLocation,
        map: map,
        title: 'Username',
        icon: planeSymbol

      });
    }
    map.panTo(new google.maps.LatLng(getLat, getLong));

  }, 3000);


  marker.setMap(map);
  //  moveAircraft(map, marker);

}
var angle = 0;

function simulateMovement() {
  angle += 1;
  var newPt = google.maps.geometry.spherical.computeOffset(new google.maps.LatLng(42, -72), 100000, angle);
  document.getElementById('latitude').innerHTML = newPt.lat();
  document.getElementById('longitude').innerHTML = newPt.lng();
  var heading = angle + 90;
  document.getElementById('trueHeading').innerHTML = heading;
}
setInterval(simulateMovement, 1000);
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="latitude">42</div>
<div id="longitude">-72</div>
<div id="trueHeading">90</div>
<div id="map"></div>

Rotate SVG symbol to match aircraft heading using Google Maps API

Tags:

javascript

rotation

svg

google-maps-api-3

user3352243

1 Answers

geocodezip

Recent Activity

Donate For Us

Rotate SVG symbol to match aircraft heading using Google Maps API

Tags:

javascript

rotation

svg

google-maps-api-3

user3352243

1 Answers

geocodezip

Related questions

Recent Activity

Donate For Us