title: Binding google map sidebar links to markers
body: <p>I have a map which I have created using the Javascript API for Google Maps which contains markers for each of the locations being mapped. I then have a link for each location in a sidebar outside of the map that when clicked on, opens the infoWindow for the associated location. This all works great. What I am trying to figure out is how to make the binding "go the other way" so that when I click on one of the markers, the corresponding link (these are list items on the page) is highlighted. When creating the markers for the map they are stored in an array with the array location then embedded in the link, so the click function just takes the markers location in the array:</p>
  
  <pre><code>side_bar_html += '&lt;li id="li-'+ (markersArray.length-1) + '"&gt;&lt;a href="javascript:myclick(' + (markersArray.length-1) + ')"&gt;' + address[1] + '&lt;\/a&gt;&lt;/li&gt;';    
  
  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
      google.maps.event.trigger(markersArray[i], "click");
  }
  </code></pre>
  
  <p>I've been looking at the google.maps.Marker class, hoping there would be something I could use to do this binding, but so far haven't found what I'm looking for. Basically what I need is in the addListener function for the marker, a unique tag or id value that I could embed in the link so that a jQuery find call could highlight the link to show which one has been clicked on. </p>
  
  <p>What I have done in the past is to add just call addClass on the node returned by the jQuery find but this isn't working. The link appears correct when I do "Inspect element" but the class I'm trying to add to do the highlighting is not being added.</p>
  
  <p>Google maps has this functionality built-in to their map results. Thanks for any suggestions.</p>
  
  <p>Here is the code where I attempt to handle the click by adding a class to the link node:</p>
  
  <pre><code>google.maps.event.addListener(marker, 'click', function() {
                      infowindow.setContent(address[0]);
                      infowindow.open(map, this);
  
  $("#marker_links").find(".currentlySelected").removeClass("currentlySelected");
  var linkItem = $("#marker_links").find("#li-" + markersArray.length-1);
  linkItem.addClass('currentlySelected');                     
  
  
                  });
  </code></pre>
  
  <p>Where currentlySelected is defined as:</p>
  
  <pre><code>nav li.currentlySelected {
      border: 0;
      background-color: white;
      color: #6d6e71;
  }
  </code></pre>
  
  <p>If I log the linkItem to the console I get what appears to be a valid object, yet addClass does not stick...</p>