google map sidebar marker to toggleshow hidden divs outside of map

Question

I've set up a sidebar google map and have the sidebar buttons when clicked showing a marker/infowindow on the map as well as showing a hidden div with info which is outside of the map. I want to make the markers clickable but I'm having a tough time figuring how to make the markers show the same hidden div as their sidebar counterparts do. Any help would be appreciated. Taken me a while to get to this point only to find that the markers don't show/hide the divs as well.

/**
* map
*/
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("sidebar2");
  }
  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 || "180px";
  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');
  }
row.onclick = function(){
     google.maps.event.trigger(marker, 'click');
     jQuery ('.content_selected').hide().removeClass('content_selected');
     jQuery('#div'+opts.target).show().addClass('content_selected');;
}
  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("sidebar2")
    || 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(39.924186, -75.297571),
  target:'1',
  icon: 'images/MapPin.png',
  title: "Royal Legends VBC",
  sidebarItem: "Royal Legends VBC",
  content: '<div id="hook">Royal Legends VBC</div>'
});   
makeMarker({
  position: new google.maps.LatLng(40.152785, -76.750233),
  target:'2',
  icon: 'images/MapPin.png',
  title: "Yorktowne VBC",
  sidebarItem: "Yorktowne VBC",
  content: '<div id="hook">Yorktowne VBC</div>'
  });
makeMarker({
  position: new google.maps.LatLng(39.962254, -75.605264),
  target:'3',
  icon: 'images/MapPin.png', 
  title: "Lokahi",
  sidebarItem: "Lokahi",
  content: '<div id="hook">Lokahi</div>',
  clickable: false
}); 
makeMarker({
  position: new google.maps.LatLng(40.152785, -76.750233),
  target:'4',
  icon: 'images/MapPin.png', 
  title: "Yorktowne VBC",
  sidebarItem: "Yorktowne VBC",
  content: '<div id="hook">Yorktowne VBC</div>',
  clickable: false
}); 


/**
 *   fit viewport to markers
 */
map.fitBounds(markerBounds);

And this is the show/hide part of the script. Thanks

row.onclick = function(){
     google.maps.event.trigger(marker, 'click');
     jQuery ('.content_selected').hide().removeClass('content_selected');
     jQuery('#div'+opts.target).show().addClass('content_selected');;
}

Here is a link to see it in action. Thanks

Answer 1

You should add another addListener on the markers and add your content_selected class here,

google.maps.event.addListener(marker, "click", function(){
    //code
});

Are you using the index of the sidebar_item to activate the hidden div ? In this case you should add some id's to the infowindow of the markers to target easyly what div to open.

I see that when you click on a marker, the good sidebar button activate, in this case you can open the good div just after the activation of the button like you do when a user click on it.

PS : You have a double ; on the last line you post.

EDIT : Just noticed that when you do

if(this.sidebarButton)this.sidebarButton.button.focus();

You could create a selected class for the sidebar buttons and after show the good hidden div by look which sidebar button is activate. Or more simply trigger the click event on the button like :

if(this.sidebarButton)$(this.sidebarButton.button).trigger("click");

EDIT 2

 row.onfocus = function(){
     jQuery('.content_selected').hide().removeClass('content_selected');
     jQuery('#div'+opts.target).show().addClass('content_selected');
 }