title: Google Maps API Sidebar
body: <p>I'm adding markers and sidebar this way:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //&lt;![CDATA[
  
      if (GBrowserIsCompatible()) {
  
        // this variable will collect the html which will eventually be placed in the side_bar
        var side_bar_html = "";
  
        // arrays to hold copies of the markers and html used by the side_bar
        // because the function closure trick doesnt work there
        var gmarkers = [];
  
        // A function to create the marker and set up the event window
        function createMarker(point,name,html) {
          var marker = new GMarker(point);
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
          });
          // save the info we need to use later for the side_bar
          gmarkers.push(marker);
          // add a line to the side_bar html
          side_bar_html += '&lt;li&gt;&lt;a href="javascript:myclick(' + (gmarkers.length-1) + ')"&gt;' + name + '&lt;\/a&gt;&lt;\/li&gt;';
           return marker;
        }
  
        // This function picks up the click and opens the corresponding info window
        function myclick(i) {
          GEvent.trigger(gmarkers[i], "click");
          GEvent.trigger(gmarkers2[i], "click");
        }
  
        // create the map
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng( 52.898962,-8.21228), 7);
  
        // add the points    
        var point = new GLatLng( 53.357826,-6.28418 );
        var marker = createMarker(point,"Ashgrove Interparts Ltd.","&lt;strong&gt;Ashgrove Interparts Ltd.&lt;/strong&gt;&lt;br&gt;Kill Avenue.&lt;br&gt;Dunlaoire.&lt;br&gt;Co Dublin.&lt;br&gt;Tel; 01-2805063.&lt;br&gt;Contact; Mr Dermot Kelly.&lt;br&gt;Dublin Area")
        map.addOverlay(marker);
  
        var point = new GLatLng( 53.285845,-6.158266 );
        var marker = createMarker(point,"Abbey Service Station.","&lt;strong&gt;Abbey Service Station.&lt;/strong&gt;&lt;br&gt;Abbey Road.&lt;br&gt;Monkstown.&lt;br&gt;Co. Dublin.&lt;br&gt;Tel; 01-2809626.&lt;br&gt;Contact; George/Kay.")
        map.addOverlay(marker);
  
        var point = new GLatLng( 53.340508,-6.228905 );
        var marker = createMarker(point,"A &amp; D Motorfactors.","&lt;strong&gt;A &amp; D Motorfactors.&lt;/strong&gt;&lt;br&gt;Cromwellsfort Rd,&lt;br&gt;Dublin 12.&lt;br&gt;Tel; 01-460-1808.&lt;br&gt;Contact; Aiden/Ed.")
        map.addOverlay(marker);
  
        var point2 = new GLatLng( 53.440508,-6.238905 );
        var marker2 = createMarker(point2,"test","&lt;strong&gt;A &amp; D Motorfactors.&lt;/strong&gt;&lt;br&gt;Cromwellsfort Rd,&lt;br&gt;Dublin 12.&lt;br&gt;Tel; 01-460-1808.&lt;br&gt;Contact; Aiden/Ed.")
        map.addOverlay(marker);
  
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      }
      else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }
      //]]&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>Now got question. How to extend it and make possible to add different markers to differend elements?</p>