Question

Good morning.

I have the next code which put some markers in a map from a xml file, every 5 seconds I call again the xml file and I update the position of the markers, but the problem is that the infowindows are not updated. Does anyone knows how to update them=

Here you have the code:

//<![CDATA[

var side_bar_html = ""; 


var gmarkers = []; 

var map = null;
var markerclusterer = null;




function myclick(i) {
    google.maps.event.trigger(gmarkers[i], "click");
    map.setZoom(map.getZoom()+2); 
}

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();
    });


    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 html="<b>"+alias+" "+speed+" km/h <br/> "+timestamp;


            var marker = createMarker(point,alias+" "+imei,html,estado,alias, speed, timestamp, altitude, angle);
        }   
        markerCluster = new MarkerClusterer(map, gmarkers);

    });
}
var infowindow = new google.maps.InfoWindow(
{ 

    size: new google.maps.Size(150,60)
});

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 html="<b>"+alias+" a "+speed+" km/h <br/> "+timestamp;


            var newLatLng = gmarkers[i].setPosition(point,alias+" "+imei,html,estado,alias,speed,timestamp,altitude,angle);


        }   
        markerCluster = new MarkerClusterer(map, gmarkers); 
    });

}, 5000);
//finish updateMarkers

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

    var textoLabel= alias+" speed: "+ speed+" km/h";
    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(timestamp + alias); 
        infowindow.open(map,newLatLng);
    });

    gmarkers.push(newLatLng);

// side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + imei +'<\/a><br>';
}

Answer 1

You are not assigning the event handler in the setInterval function, so no infowindows.

Add this code to the setInterval() after creating the marker

        google.maps.event.addListener(newLatLng, 'click', function() {
        infowindow.setContent(timestamp + alias); 
        infowindow.open(map,newLatLng);

This may result in a closure problem as you are in a loop. So you can do something like the solutions in this Passing values in for loop to event listeners- Javascript.