I have a web app that will draw a polyline for each user (tracks movement), and I'd like to incorporate some functionality that allows the web app user to 'focus' on a certain user by changing the color of the polyline. It will have to first change all the polylines to red, and then change the selected polyline to blue. I think this is best to avoid focusing on one line, then trying to focus on another and having them both blue. I'm really not sure how to implement this, but I have functionality that returns a user id when the name is pressed. I just need to iterate over each object (each user's polyline) to change them to red first, then change the specific one to blue. Here is some code below. If you could point me in the right direction, I'd appreciate it. Thanks. This is a condensed version of my code so I hope it provides enough information.
function User(id) {
this.id = id;
this.locations = [];
this.mark = 0;
this.getId = function() {
return this.id;
};
this.addLocation = function(latitude, longitude) {
this.locations[this.locations.length] = new google.maps.LatLng(latitude, longitude);
};
var polyline;
this.drawPolyline = function(loc) {
polyline = new google.maps.Polyline({
map: map,
path: loc,
strokeColor: #FF0000,
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
};
this.removePolyline = function() {
if (polyline != undefined) {
polyline.setMap(null);
}
}
this.get_user_info = function(user_id) {
var datastr = 'id=' + user_id;
$.ajax({
type: POST,
url: 'user_api.php',
data: datastr,
dataType: 'json',
success: function(data){
var phone_id = data[0];
var leftDiv = document.createElement(div); //Create left div
leftDiv.id = left; //Assign div id
leftDiv.setAttribute(style, float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;); //Set div attributes
leftDiv.style.background = divColor;
//user_name = document.createTextNode(fullName + ' '); //Set user name
a = document.createElement('a');
a.href =javascript:setFocus(' + phone_id + ');;
a.innerHTML = fullName + ' ';
leftDiv.appendChild(a);
}
});
}
}
function setFocus(phone_id) {
alert(phone_id);
}
function Users() {
this.users = {};
this.createUser = function(id) {
this.users[id] = new User(id);
return this.users[id];
};
this.getUser = function(id) {
return this.users[id];
};
this.removeUser = function(id) {
var user = this.getUser(id);
delete this.users[id];
return user;
};
}
var users = new Users();
