title: Way to open Google Map V3 InfoBox from click in sidebar
body: <p>I am using Info box plugin in google map v3 </p>
  
  <p>I want to replicate the same functioning as seen here </p>
  
  <p><a href="http://coolhunting.com/local/#/metroarea/chicago/jack-spade/" rel="nofollow">http://coolhunting.com/local/#/metroarea/chicago/jack-spade/</a></p>
  
  <p>Basically I want that whenever some one click on sidebar , respective info box should open in map.</p>
  
  <p>I have added a onclick function on click on element in sidebar , but not sure what should I do in that function </p>
  
  <p>Here is the code I have </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
         &lt;html&gt;
        &lt;head&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /&gt;
        &lt;style type="text/css"&gt;
          html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 50% }
          &lt;/style&gt;
           &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api    /js?sensor=true"&gt;&lt;/script&gt;
  &lt;script src="js/infobox.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
   function initialize() {
      var latlng = new google.maps.LatLng(66.672962361614566, 12.56587028503418);
  
      var myMapOptions = {
           zoom:5
          ,center: latlng
          ,mapTypeId: google.maps.MapTypeId.ROADMAP
          ,streetViewControl: false
      };
      var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
  // namn
  var name=[];
  name.push('Test 1');
  name.push('Test 2');
  
  // positioner
  var position=[];
  position.push(new google.maps.LatLng(66.667093265894245,12.581255435943604));
  position.push(new google.maps.LatLng(62.66453963191134, 12.584795951843262));
  
  // infoboxes
  var infobox = [];
  infobox.push("&lt;div&gt;Hello 1&lt;/div&gt;");
  infobox.push("&lt;div&gt;Hello 2&lt;/div&gt;");
  
  var markers=new Array();
  
  
  for (i = 0; i &lt; position.length; i += 1) {
  // Call function
  createMarkers(position[i], infobox[i], name[i]);
  
  
  }
  
  function createMarkers(position,content,name) {
  
      var marker = new google.maps.Marker({
          map: theMap,
          draggable: false,
          position: position,
          visible: true,
          title: name
      });
  markers.push(marker);
      var boxText = document.createElement("div");
      boxText.style.cssText = "background: #ffffff; width: 300px; height: 70px; padding: 5px;";
      boxText.innerHTML = content;
  
      var myOptions = {
           content: boxText
          ,disableAutoPan: false
          ,maxWidth: 0
          ,pixelOffset: new google.maps.Size(-37, -120)
          ,zIndex: null
          ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 1
              ,width: "300px"
           }
          ,closeBoxMargin: "5px 5px 5px 5px"
          ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
          ,infoBoxClearance: new google.maps.Size(1, 1)
          ,isHidden: false
          ,pane: "floatPane"
          ,enableEventPropagation: false
      };
  
      google.maps.event.addListener(marker, "click", function (e) {
          ib.open(theMap, this);
      });
  
      var ib = new InfoBox(myOptions);
   //ib.open(theMap, marker);
  
      }
  
  }
  function show_marker(){
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
    &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt;&lt;div&gt;&lt;a onclick="show_marker()" href="javascript:void(0)"&gt;show marker&lt;/a&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>