...

View Full Version : closure issue, infowindows in google maps when reload a xml file



franrtorres77
11-05-2012, 11:15 AM
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;

// 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
11-05-2012, 12:23 PM
If you post any code please put it in between
tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum