title: clickable sidebar markerclusterer google map api v.3
body: <p>Google map API v.3 is used.
  Attached with markerclusterer.js</p>
  
  <p>I would like to make a map that show the cluster of markers. (Done!)</p>
  
  <p>When I click on the marker, an infowindow would be shown. (Done!)</p>
  
  <p>A sidebar is made next to the map. When click on it, an infowindow would be shown for relevant marker. (Failed, why?)</p>
  
  <p>Please help me take a look at the code of javascript and html.</p>
  
  <pre><code>var hk_markers = [
  {
  'id':1,
  'name':'Sanrio Puroland(サンリオピューロランド)',
  'location':'Tokyo, Japan',
  'lat':35.62464,
  'lng':139.42916,
  },
  {
  'id':2,
  'name':'Harmonyland(ハーモニーランド)',
  'location':'Oita, Japan',
  'lat':33.40162,
  'lng':131.54657,
  },
  {
  'id':3,
  'name':'Sanrio Hello Kitty Town',
  'location':'Johor, Malaysia',
  'lat':1.41385,
  'lng':103.66031,
  },
  {
  'id':4,
  'name':'China Hello Kitty Park(浙江安吉凯蒂猫家园)',
  'location':'Zhejiang, China',
  'lat':30.62377,
  'lng':119.73663,
  },
  {
  'id':5,
  'name':'Hello Kitty Go Green Organic Farm (Hello Kitty有機薈低碳農莊)',
  'location':'near Kam Sheung Road MTR Station, West Rail Line, Yuen lng, the New Territories, Hong Kong',
  'lat':22.43402,
  'lng':114.06037,
  },
  {
  'id':6,
  'name':'Jeju Hello Kitty Island - Museum &amp; Cafe (헬로키티아일랜드)',
  'location':'340, Hanchang-ro, Andeok-myeon, Seogwipo, Jeju-do, South Korea',
  'lat':33.29021,
  'lng':126.35205,
  },
  {
  'id':7,
  'name':'Dubai Hello Kitty Beauty Spa (مرحبا كيتي الجمال سبا)',
  'location':'Jumeirah town centre, Jumeirah Beach Road, Dubai, the United Arab Emirates',
  'lat':25.21491,
  'lng':55.25100,
  },];
  
  var map;
  
  var myCentreLat = 22.3700556;
  var myCentreLng = 114.1535941;
  
  var initialZoom = 2;
  var markers = [];
  var markerCluster;
  
  var side_bar_html = ""; 
  
  
  
  function showAll(){
  
  var infowindow = new google.maps.InfoWindow();
  
  
  
  for (var i = 0; i &lt;hk_markers.length; i++) {
  
      var myPos = new google.maps.LatLng(hk_markers[i].lat,hk_markers[i].lng);
      var marker = new google.maps.Marker({
          position: myPos,
          map: map
      });
  
      var info = hk_markers[i].name;
  
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
              infowindow.setContent(hk_markers[i].name);
              infowindow.open(map, marker);
          }
      })(marker, i));
  
      markers.push(marker);
  
      side_bar_html += '&lt;a href="javascript: myclick('+ (markers.length-1) +')"&gt;' + '&lt;p style="font-size:10px"&gt;' + hk_markers[i].name + '&lt;\/p&gt;' + '&lt;\/a&gt;';    
  
  }
  markerCluster = new MarkerClusterer(map, markers);
  
  
  }
  
  function myclick(i) {
      google.maps.event.trigger(markers[i], "click");
  }
  
  
  
  
  function initialize() {
  
  var myDest = new google.maps.LatLng(myCentreLat,myCentreLng);
  
  var myOptions = {
      zoom: initialZoom,
      center: myDest,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  google.maps.event.addListener(map, 'click', function() {
      infowindow.close();
      });
  
  showAll();
  document.getElementById("side_bar").innerHTML = side_bar_html;
  markers=[];
  
  }
  </code></pre>
  
  <p>Here is the html file.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; 
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.8&amp;sensor=false"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="hkmarkersetup2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" &gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body onload="initialize()"&gt;
  &lt;h2&gt;Testing&lt;/h2&gt;
  
  
  
  &lt;table border=1&gt;
  &lt;td&gt;
  &lt;div class="gmap" id="map_canvas" style="height: 450px; width: 900px"&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;td width = 450&gt;
  &lt;div class ="wrap" id="side_bar" style="overflow:auto; height:450px"&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Thanks !</p>