Google Maps API Sidebar

Question

I'm adding markers and sidebar this way:

<script type="text/javascript">
    //<![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 += '<li><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><\/li>';
         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.","<strong>Ashgrove Interparts Ltd.</strong><br>Kill Avenue.<br>Dunlaoire.<br>Co Dublin.<br>Tel; 01-2805063.<br>Contact; Mr Dermot Kelly.<br>Dublin Area")
      map.addOverlay(marker);

      var point = new GLatLng( 53.285845,-6.158266 );
      var marker = createMarker(point,"Abbey Service Station.","<strong>Abbey Service Station.</strong><br>Abbey Road.<br>Monkstown.<br>Co. Dublin.<br>Tel; 01-2809626.<br>Contact; George/Kay.")
      map.addOverlay(marker);

      var point = new GLatLng( 53.340508,-6.228905 );
      var marker = createMarker(point,"A & D Motorfactors.","<strong>A & D Motorfactors.</strong><br>Cromwellsfort Rd,<br>Dublin 12.<br>Tel; 01-460-1808.<br>Contact; Aiden/Ed.")
      map.addOverlay(marker);

      var point2 = new GLatLng( 53.440508,-6.238905 );
      var marker2 = createMarker(point2,"test","<strong>A & D Motorfactors.</strong><br>Cromwellsfort Rd,<br>Dublin 12.<br>Tel; 01-460-1808.<br>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");
    }
    //]]>
    </script>

Now got question. How to extend it and make possible to add different markers to differend elements?

Answer 1

I am assuming that what you are trying to do is to differentiate your sets of markers, but use your common myclick handler code to show the appropriate info window for the marker.

There are a few ways you could do this. It looks like you were wanting to have a separate arrays of markers for each city because you have referenced a gmarkers2 array in your myclick handler. This is not going to work because you are creating the markers using the same handler function and the index wont work for both arrays.

So you either need a createMarker function that adds the new marker to the appropriate marker array and specifies a click handler that uses that array or you can use the same marker array and just change createMarker to update separate side_bar_html variables to store the reference url.

I have hacked together an example (based on your source) that uses the second approach. Please let me know if this isn't what you are trying to do.

N.B. In my sample, I stuck the "side bar" below the map.