refresh infowindows in google maps when reload a xml file

See more:

XML

Google-Maps

Hi there. I am working in this code and I am having some problems when I want to display the updated infowindow when i reload a xml file.

The position of the markers works well, and they move everytime that the xml is loaded with a setinterval(), but the problem is that infowindow just shows up the last element of the array in any marker.

Does anyone knows how to show the right updated infowindow for every marker?

Thank you very much.

//<![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;



 
// 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,
    disableDefaultUI: true,
    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 altitude= markers[i].getAttribute("altitude");
          var angle= markers[i].getAttribute("angle");
          var soloFecha= markers[i].getAttribute("soloFecha");
          var hora= markers[i].getAttribute("hora");
          var html=""+alias+" <br/> Speed: "+speed+" km/h <br/> Last position at:  "+hora+ "<br/> Date:"+soloFecha;
          
         
         
          // create the marker
          var marker = createMarker(point,alias+" "+imei,html,estado,alias, speed, timestamp, altitude, angle, soloFecha, hora);
        }    
      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,60)
  });
  

  //the next code will call again the xml file and update the position of the markers
setInterval(function updateMarkers() {
google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        
        });

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 altitude= markers[i].getAttribute("altitude");
          var angle= markers[i].getAttribute("angle");
          var soloFecha= markers[i].getAttribute("soloFecha");
          var hora= markers[i].getAttribute("hora");
          var html=""+alias+" a una velocidad de "+speed+" km/h <br/> ultima posicion  a laaaas: "+hora+ "<br/> Fecha:"+soloFecha;
         
         // update the position of the marker
          var newLatLng = gmarkers[i].setPosition(point,alias+" "+imei,html,estado,alias,speed,timestamp,altitude,angle, soloFecha, hora);
        
        
//start tryouts for update the content of the infowindows
                infowindow.setContent(""+alias+" Speed: "+speed+" km/h <br/> Last position at: "+hora+ "<br/> Date:"+soloFecha); 

           infowindow.open(map,newLatLng);

//end tryouts for update the content of the infowindows
          

        }
        
       markerCluster = new MarkerClusterer(map, gmarkers);     
      }//end loop
      );//end download
      
 

}//end function 
 , 5000);//end code for refreshing markers


function createMarker(latlng, imei, html, estado, alias, speed, timestamp, altitude, angle, soloFecha, hora) {
if(estado == 1)
  image = '/artworks/icons/truck_green3.png';
else
  image = '/artworks/icons/truck_red.png';

    var textoLabel= ""+alias+" <br/> Speed: "+speed+" km/h <br/> Last position at: "+hora+ "<br/> Date:"+soloFecha+"<br/> first html ";
    var contentString = html;
    var newLatLng = new MarkerWithLabel({
        position: latlng,
        icon: image,
         // map: map,
        draggable: true,
        
        flat: true,
        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(newLatLng, 'click', function() {
        infowindow.setContent(textoLabel); 
        infowindow.open(map,newLatLng);
         map.setZoom(map.getZoom()+2); //when select a marker applies a zoom
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(newLatLng);
    // add a line to the side_bar html
   // side_bar_html += '<a href="java<!-- no -->script:myclick(' + (gmarkers.length-1) + ')">' + imei +'<\/a><br>';
}