Icon rotation based on heading update staying in same heading

Question

Hello bellow is the snippet of the offending code. Within the JSON file is a value.track which is setting a map marker icon using marker rotation. Problem is that the icon rotation stays the same as what is was first told. I.E when first loaded the heading is 360 then the aircraft turns to 180 it will not rotate the Icon to match the heading unless I refresh the page. I would guess this could be fixed with a "var" some where but not sure where. My apologies if this is not very clear I am very new to Java Script. In other words the marker position update but not the marker rotation!

 var infoWindows = {};
  var markers = {};
 function getIconForPlane(value) {
    var r = 255, g = 255, b = 0;
    return {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 5,
        fillColor: 'rgb('+r+','+g+','+b+')',
        fillOpacity: 0.9,
        rotation: value.track
        };
    }

function initialize() {

var mapOptions = {
    center: new google.maps.LatLng(-36.363, 175.044),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), 
 mapOptions);
window.setInterval(readData, 1000);
}

function text(value) {
return '<b>Speed: </b> ' + value.speed + ' <br><b>Flight: </b>' + 
value.flight 
+' <br><b>HEX: </b>' + value.hex + '<br><b>Altitude: </b>' + value.altitude 
 + 
 '<br><b>Vertical Rate: </b>' + value.vert_rate +'<br><b>Last radar contact: 
 </b>' +value.seen +'<b>s</b>';
window.setInterval(text, 1000);
}

 function createInfoWindow(value, marker, map) {
 var iw = new google.maps.InfoWindow({
 content: text(value)
 });
 google.maps.event.addListener(marker, 'click', function() {
   iw.open(map, marker);
 });
return iw;
}

function readData() {
 $.getJSON
 ('https://crossorigin.me/http://radar1.ddns.net:3080/data/aircraft.json
    ', function(data) {
$.each(data.aircraft, function(i, value) {
  var myLatlng = new google.maps.LatLng(value.lat, value.lon, value.flight, 
  value.altitude);
  if (markers[value.hex]) {
    markers[value.hex].setPosition(myLatlng);
    console.log("moving marker for " + value.hex);
    infoWindows[value.hex].setContent(text(value));
     } else {
    // create new
    markers[value.hex] = new google.maps.Marker({
      position: myLatlng,
      icon: getIconForPlane(value),
      map: map,
      title: "Callsign: " + value.flight + ", Altitude: " + value.altitude
    });
    console.log("creating marker for " + value.hex);
    infoWindows[value.hex] = createInfoWindow(value, markers[value.hex] 
 ,map)
  }
   });
  });
}

If the marker already exists, your code only changes the position, sounds like you want to update the rotation as well. — geocodezip, Jul 02 '17 at 10:12
@geocodezip yes that exactly what I want to do thanks I will edit the question. — Kieran Geraghty, Jul 02 '17 at 18:28
possible duplicate of [Change Google map marker orientation according path direction](https://stackoverflow.com/questions/23149613/change-google-map-marker-orientation-according-path-direction) — geocodezip, Jul 03 '17 at 00:59

score 0 · Accepted Answer · answered Jul 03 '17 at 01:06

Update the icon for the marker when you update its position:

if (markers[value.hex]) {
  markers[value.hex].setPosition(myLatlng);
  markers[value.hex].setIcon(getIconForPlane(value));
  infoWindows[value.hex].setContent(text(value));
} else {
  // create new
  markers[value.hex] = new google.maps.Marker({
    position: myLatlng,
    icon: getIconForPlane(value),
    map: map,
    title: "Callsign: " + value.flight + ", Altitude: " + value.altitude
  });
  infoWindows[value.hex] = createInfoWindow(value, markers[value.hex],map);
}

(you probably want to update the title also as the altitude may change)

Thanks so much @geocodezip The altitude auto updates already but thanks any way. — Kieran Geraghty, Jul 03 '17 at 04:26

Icon rotation based on heading update staying in same heading

1 Answers1