Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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 = {
        
    zoom12,
        
    disableDefaultUItrue,
        
    center: new google.maps.LatLng(37.169619,-3.756981),
        
    mapTypeControltrue,
        
    mapTypeControlOptions: {stylegoogle.maps.MapTypeControlStyle.DROPDOWN_MENU},
        
    navigationControltrue,
        
    mapTypeIdgoogle.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 
    0markers.lengthi++) {
              
    // 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 
    speedmarkers[i].getAttribute("speed");
              var 
    timestampmarkers[i].getAttribute("timestamp");
              var 
    estadomarkers[i].getAttribute("estado");
              var 
    conectadomarkers[i].getAttribute("conectado");
              var 
    altitudemarkers[i].getAttribute("altitude");
              var 
    anglemarkers[i].getAttribute("angle");
              var 
    soloFechamarkers[i].getAttribute("soloFecha");
              var 
    horamarkers[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,aliasspeedtimestampaltitudeanglesoloFechahora);
            }    
          
    markerCluster = new MarkerClusterer(mapgmarkers);
            
    // 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 
    0markers.lengthi++) {
            
        
              
    // 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 
    speedmarkers[i].getAttribute("speed");
              var 
    timestampmarkers[i].getAttribute("timestamp");
              var 
    estadomarkers[i].getAttribute("estado");
              var 
    conectadomarkers[i].getAttribute("conectado");
              var 
    altitudemarkers[i].getAttribute("altitude");
              var 
    anglemarkers[i].getAttribute("angle");
              var 
    soloFechamarkers[i].getAttribute("soloFecha");
              var 
    horamarkers[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,anglesoloFechahora);
            
            
    ////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(mapgmarkers);     
          }
    //end loop
          
    );//end download
          
     

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


    function createMarker(latlngimeihtmlestadoaliasspeedtimestampaltitudeanglesoloFechahora) {
    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({
            
    positionlatlng,
            
    iconimage,
             
    // map: map,
            
    draggabletrue,
            
            
    flattrue,
            
    labelContenttextoLabel,
           
    labelAnchor: new google.maps.Point(400),
           
    labelClass"labels"// the CSS class for the label
           
    labelStyle: {opacity0.50},
            
    zIndexMath.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>';

    Last edited by VIPStephan; 11-05-2012 at 12:22 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •