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.
var side_bar_html = "";
var gmarkers = [];
var map = null;
var markerclusterer = null;
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
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();
});
downloadUrl("vehiculos.asp", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
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;
var marker = createMarker(point,alias+" "+imei,html,estado,alias, speed, timestamp, altitude, angle, soloFecha, hora);
}
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++) {
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;
var newLatLng = gmarkers[i].setPosition(point,alias+" "+imei,html,estado,alias,speed,timestamp,altitude,angle, soloFecha, hora);
infowindow.setContent(""+alias+" Speed: "+speed+" km/h <br/> Last position at: "+hora+ "<br/> Date:"+soloFecha);
infowindow.open(map,newLatLng);
}
markerCluster = new MarkerClusterer(map, gmarkers);
}
);
}
, 5000);
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,
draggable: true,
flat: true,
labelContent: textoLabel,
labelAnchor: new google.maps.Point(40, 0),
labelClass: "labels",
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);
});
gmarkers.push(newLatLng);
}