Change Polyline Color Dynamically

Question

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

Answer 1

Currently you are not storing the polyline inside the User-object, you should first do it to make the line accessible later:

this.drawPolyline = function(loc) {
        this.polyline = new google.maps.Polyline({//<--note the this
        map: map,
        path: loc,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
        });
    this.polyline.setMap(map);
};

now you will be able to higlight a line:

Users.prototype.highlightLine=function(id)
{
  for(var k in this.users)
  {
    this.users[k].polyline.setOptions({strokeColor:(id===k)?'blue':'red'});
  }
}

//use it
users.highlightLine(5)//will highlight the line for user with id 5