Question

I have the next code to retrieve some data from a xml file. The problem is that when I want to refresh the markers, the response that I get is a duplicated marker in the map. How can I update the points without having duplicated markers?

Best regards

//<![CDATA[
  // this variable will collect the html which will eventually be placed in the       side_bar 
  var side_bar_html = ""; 

  // arrays to hold copies of the markers and html used by the side_bar 
  // because the function closure trick doesnt work there 
  var gmarkers = []; 

 // global "map" variable
  var map = null;
  var markerclusterer = null;

// A function to create the marker and set up the event window function 



function createMarker(latlng, imei, html, estado, alias, speed, timestamp) {
if(estado == 1)
  image = '/artworks/icons/truck_green3.png';
else
  image = '/artworks/icons/truck_red.png';
var textoLabel= "this is the text"
var contentString = html;
var marker = new MarkerWithLabel({
    position: latlng,
    icon: image,
    // map: map,
    labelContent: textoLabel,
   labelAnchor: new google.maps.Point(40, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.50},
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });


google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + imei + '<\/a><br>';
}

    // This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}



function initialize() {
  // create the map
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(37.169619,-3.756981),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);
}
    function getMarkers() {
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });
  // Read the data from example.xml
  downloadUrl("vehiculos.asp", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var imei = markers[i].getAttribute("imei");
      var alias = markers[i].getAttribute("alias");
      var speed= markers[i].getAttribute("speed");
      var timestamp= markers[i].getAttribute("timestamp");
      var estado= markers[i].getAttribute("estado");
      var conectado= markers[i].getAttribute("conectado");
var html="<b>"+alias+"</b><br> a una velocidad de "+speed+" km/h <br/>     ultima posicion  a las: "+timestamp;

      // create the marker
      var marker = createMarker(point,alias+" "+imei,html,estado, speed, timestamp );
    }

    markerCluster = new MarkerClusterer(map, gmarkers);
    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = side_bar_html;
  });
}

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
 });

  // Removes the overlays from the map, but keeps them in the array.
  function clearOverlays() {
    getMarkers(null);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteOverlays() {
    clearOverlays();
    getMarkers = [];
  }
setInterval(clearOverlays, 3000);
setInterval(deleteOverlays, 4000);
setInterval(getMarkers, 5000);    

Answer 1

Give your markers unique ids (maybe one of your existing attributes is already unique). If the unique id already exists, move that marker to the new location (or just don’t add it again),if it doesn’t, create a new marker.

If they don’t move, you can also avoid duplicates by checking the distance between new markers and all your existing markers, if it is less than a “same marker” threshold (say ~0.1 meters), don’t add it again.

There is a problem with your clearOverlays method (getMarkers(null) just calls getMarkers):

// Removes the overlays from the map, but keeps them in the array.
function clearOverlays() {
  for (var i=0; i<gmarkers.length; i++)
  {
     gmarkers[i].setMap(null);
  }
}