Clear old marker(s) then update

Question

Below is the code of my website. It refreshes every second. Upon refreshing the new lat/lng it will load the new markers but it keeps the old markers. I have tried many forums etc with no luck. Any help is appreciated thanks.

function initialize() {

var mapOptions = {
    center: new google.maps.LatLng(-36.363, 175.044),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}; 

var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
window.setInterval(function() {
        readData();
    }, 1000);
}
   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);
        var marker = new google.maps.Marker({
                position: myLatlng,
                icon: 'airplane.jpg',
                map: map,
                title: "Callsign   Altitude  " + value.flight + value.altitude


            });

}

            var infowindow = new google.maps.InfoWindow({
                 content: '<b>Speed:</b> ' + value.speed+  '<b>   HEX:</b>' + value.hex+ '<b>   Altidtude:   </b>' +value.altitude + '<b>    Vertical Rate:  </b>' +value.vert_rate


});

 google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map, marker);
});






        });
    });

}

Thanks Chris I have edited the question. The markers are showing but when they get refreshed I would like the old ones to be removed. — visit us at nzlocos.tk, Jun 25 '17 at 23:35
Create an array of markers. In your `$.each`, call `marker[i].setPosition(...)` — ChrisG, Jun 26 '17 at 00:09

ChrisG · Accepted Answer · 2017-06-27T09:04:34.287

Here's how you create / update markers and infoWindows:

var infoWindows = {};
var markers = {};

function initMap() {
  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>HEX: </b>' + value.hex + '<br><b>Altitude: </b>' + value.altitude + '<br><b>Vertical Rate: </b>' + value.vert_rate;
}

function createInfoWindow(value, marker, map) {
  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.squawk]) {
        markers[value.squawk].setPosition(myLatlng);
        console.log("moving marker for " + value.squawk);
        infoWindows[value.squawk].setContent(text(value));
      } else {
        // create new
        markers[value.squawk] = new google.maps.Marker({
          position: myLatlng,
          // icon: 'airplane.jpg',
          map: map,
          title: "Callsign: " + value.flight + ", Altitude: " + value.altitude
        });
        console.log("creating marker for " + value.squawk);
        infoWindows[value.squawk] = createInfoWindow(value, markers[value.squawk] ,map)
      }
    });
  });
}

Thanks so much! One issue I am having now is the InfoWindows are not opening. Any ideas on how to fix please? Thanks. — visit us at nzlocos.tk, Jun 26 '17 at 01:49
Sure, add the code for the InfoWindows back into my example code. — ChrisG, Jun 26 '17 at 07:34
Hi Chris, not sure what I am doing wrong but I can still not get them to open. — visit us at nzlocos.tk, Jun 27 '17 at 08:45

Clear old marker(s) then update

1 Answers1