Как добавить класс к кнопке выбранного маркера

Question

У меня есть этот код карты Google и имеется боковая панель маркеров. Теперь я хочу добавить класс active к кнопке выбранного маркера. Я плохо разбираюсь в кодировании Google, поэтому надеюсь, что вы проведете меня в моем коде.

JSFiddle: http://goo.gl/cHIrmj

JS код:

var mapOpts = { 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scaleControl: true, 
    scrollwheel: false 
} 
var map = new google.maps.Map(document.getElementById("map"), mapOpts); 
// We set zoom and center later by fitBounds() 


/** 
* makeMarker() ver 0.2 
* creates Marker and InfoWindow on a Map() named 'map' 
* creates sidebar row in a DIV 'sidebar' 
* saves marker to markerArray and markerBounds 
* @param options object for Marker, InfoWindow and SidebarItem 
* @author Esa 2009 
*/ 
var infoWindow = new google.maps.InfoWindow(); 
var markerBounds = new google.maps.LatLngBounds(); 
var markerArray = []; 

function makeMarker(options) { 
    var pushPin = new google.maps.Marker({ 
     map: map 
    }); 
    pushPin.setOptions(options); 
    google.maps.event.addListener(pushPin, "click", function() { 
     infoWindow.setOptions(options); 
     infoWindow.open(map, pushPin); 
     if (this.sidebarButton) this.sidebarButton.button.focus(); 
    }); 
    var idleIcon = pushPin.getIcon(); 
    if (options.sidebarItem) { 
     pushPin.sidebarButton = new SidebarItem(pushPin, options); 
     pushPin.sidebarButton.addIn("sidebar"); 
    } 
    markerBounds.extend(options.position); 
    markerArray.push(pushPin); 
    return pushPin; 
} 

google.maps.event.addListener(map, "click", function() { 
    infoWindow.close(); 
}); 


/** 
* Creates an sidebar item 
* @constructor 
* @author Esa 2009 
* @param marker 
* @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth, 
*/ 

function SidebarItem(marker, opts) { 
    var tag = opts.sidebarItemType || "button"; 
    var row = document.createElement(tag); 
    row.innerHTML = opts.sidebarItem; 
    row.className = opts.sidebarItemClassName || "sidebar_item"; 
    row.style.display = "block"; 
    row.style.width = opts.sidebarItemWidth || "120px"; 
    row.onclick = function() { 
     google.maps.event.trigger(marker, 'click'); 
    } 
    row.onmouseover = function() { 
     google.maps.event.trigger(marker, 'mouseover'); 
    } 
    row.onmouseout = function() { 
     google.maps.event.trigger(marker, 'mouseout'); 
    } 
    this.button = row; 
} 
// adds a sidebar item to a <div> 
SidebarItem.prototype.addIn = function (block) { 
    if (block && block.nodeType == 1) this.div = block; 
    else this.div = document.getElementById(block) || document.getElementById("sidebar") || document.getElementsByTagName("body")[0]; 
    this.div.appendChild(this.button); 
} 
// deletes a sidebar item 
SidebarItem.prototype.remove = function() { 
    if (!this.div) return false; 
    this.div.removeChild(this.button); 
    return true; 
} 
/** 
* markers and info window contents 
*/ 
makeMarker({ 
    position: new google.maps.LatLng(60.28527, 24.84864), 
    title: "Vantaankoski", 
    sidebarItem: "Vantaankoski", 
    content: "Vantaankoski" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.27805, 24.85281), 
    title: "Martinlaakso", 
    sidebarItem: "Martinlaakso", 
    content: "Martinlaakso" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.27049, 24.85366), 
    title: "Louhela", 
    sidebarItem: "Louhela", 
    content: "Louhela" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.26139, 24.85478), 
    title: "Myyrmäki", 
    sidebarItem: "Myyrmäki", 
    content: "Myyrmäki" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.24929, 24.86128), 
    title: "Malminkartano", 
    sidebarItem: "Malminkartano", 
    content: "Malminkartano" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.23963, 24.87694), 
    title: "Kannelmäki", 
    sidebarItem: "Kannelmäki", 
    content: "Kannelmäki" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.23031, 24.88353), 
    title: "Pohjois-Haaga", 
    sidebarItem: "Pohjois<br>Haaga", 
    content: "Pohjois-Haaga" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.21831, 24.89354), 
    title: "Huopalahti", 
    sidebarItem: "Huopalahti", 
    content: "Huopalahti" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.20803, 24.92039), 
    title: "Ilmala", 
    sidebarItem: "Ilmala", 
    content: "Ilmala" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.19899, 24.93269), 
    title: "Pasila", 
    sidebarItem: "Pasila", 
    content: "Pasila" 
}); 
makeMarker({ 
    position: new google.maps.LatLng(60.17295, 24.93981), 
    title: "Helsinki", 
    sidebarItem: "Helsinki", 
    content: "Helsinki" 
}); 
/** 
* fit viewport to markers 
*/ 
map.fitBounds(markerBounds); 

Update:

Я добавил этот код, и я могу добавить активный класс.

if (this.sidebarButton) 
    this.sidebarButton.button.focus(); 
    this.sidebarButton.button.setAttribute("class", "sidebar_item active"); 

но сейчас проблема - прежний класс не удаляется. Он добавляет каждую прикладу. :(

Answer 1

Чтобы применить активный класс на кнопку выбранного маркера внести изменения в SidebarItem функции в следующим образом:?

function SidebarItem(marker, opts) { 
    var tag = opts.sidebarItemType || "button"; 
    var row = document.createElement(tag);/*Row is DOM Element of ClassName tag*/ 
    row.innerHTML = opts.sidebarItem; 
    row.className = opts.sidebarItemClassName || "sidebar_item"; 
    row.style.display = "block"; 
    row.style.width = opts.sidebarItemWidth || "120px"; 
    row.onclick = function() {/*whenever row is clicked this function is executed*/ 
     $(".active").removeClass('active'); 
     $(row).addClass('active');/*converting row i.e. DOM Element into jQuery to apply jQuery function*/ 
     google.maps.event.trigger(marker, 'click'); 
    } 
    row.onmouseover = function() { 
     google.maps.event.trigger(marker, 'mouseover'); 
    } 
    row.onmouseout = function() { 
     google.maps.event.trigger(marker, 'mouseout'); 
    } 
    this.button = row; 
} 


function makeMarker(options) { 
    var pushPin = new google.maps.Marker({ 
     map: map 
    }); 
    pushPin.setOptions(options); 
    google.maps.event.addListener(pushPin, "click", function() { 
     infoWindow.setOptions(options); 
     infoWindow.open(map, pushPin); 
     if (this.sidebarButton) { 
      this.sidebarButton.button.focus() 
      $(".active").removeClass('active'); 
      this.sidebarButton.button.setAttribute("class", "sidebar_item active"); 
     }; 
    }); 
    var idleIcon = pushPin.getIcon(); 
    if (options.sidebarItem) { 
     pushPin.sidebarButton = new SidebarItem(pushPin, options); 
     pushPin.sidebarButton.addIn("sidebar"); 
    } 
    markerBounds.extend(options.position); 
    markerArray.push(pushPin); 
    return pushPin; 
} 

Working fiddle

Answer 2

var marker = makeMarker({ 
    position: new google.maps.LatLng(60.17295, 24.93981), 
    title: "Helsinki", 
    sidebarItem: "Helsinki", 
    content: "Helsinki" 
}); 

marker.on('click', function(){ 
    $('#your_button_id').css({'color': 'red', 'background': '#000'}); 
});