closure issue, infowindows in google maps when reload a xml file

[franrtorres77]

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.

PHP Code:

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



 
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
  map.setZoom(map.getZoom()+2); // cuando se selecciona un vehiculo del listado le aplicamos un zoom
  LoadRoute();
}



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="<b>"+alias+" a una velocidad de "+speed+" km/h <br/> ultima posicion  a laaaas: "+hora+ "<br/> Fecha:"+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)
  });
  

  


  //a continuación comienza el codigo para actualizar la posicion de los marcadores sin borrarlos
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="<b>"+alias+" a una velocidad de "+speed+" km/h <br/> ultima posicion  a laaaas: "+hora+ "<br/> Fecha:"+soloFecha;
         
         // create the marker
          var newLatLng = gmarkers[i].setPosition(point,alias+" "+imei,html,estado,alias,speed,timestamp,altitude,angle, soloFecha, hora);
        
        
////tryouts for infowindow
                infowindow.setContent("<b>"+alias+" a una Velocidad de "+speed+" km/h <br/> ultima posicion  a las: "+hora+ "<br/> Fecha:"+soloFecha); 
       
        
    
        
           infowindow.open(map,newLatLng);
          


////ends tryouts for infowindow

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

}//end function 
 , 5000);//end code for refreshg


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= "<b>"+alias+" a una velocidad de "+speed+" km/h <br/> Ultima posición  a las: "+hora+ "<br/> Fecha:"+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); // cuando se selecciona un vehiculo del listado le aplicamos un 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="javascript:myclick(' + (gmarkers.length-1) + ')">' + imei +'<\/a><br>';
} 


[VIPStephan]

If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.