how to link sidebar to the markers

Question

I am trying to add sidebar. I am using name variable for links on the sidebar which are fetched from the database and it is available to me as an array. I am not able to loop twice as that puts QUERY_LIMIT to the google database.

Can anybody provide me logic on the way how to work on this functionality?

Here is my script:

<script type="text/javascript">

var markers = [];
var side_html = "";
var icon1 = "prop.png";
    var icon2 = "office.png";
    var locations = <?php echo $add_js ?>;
    var name = <?php echo $name_js ?>

    //function that will be used to handle clicks on the links in the sidebar
      function myclick(num) {
         google.maps.event.trigger(locations[num], "click");
      }

    function geocodeAddress(i) 
    {
        geocoder.geocode({'address' : locations[i]},
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              map.setCenter(results[0].geometry.location);
              createMarker(results[0].geometry.location, i);
             } else {
             alert('Geocode was not successful for the following reason: ' + status);
                    }
            });
     }    

           function createMarker(latlng,i) {
           var marker = new google.maps.Marker({
                                    map : map,
                        icon : icon1,
                                    position : latlng
                });
     var infowindow = new google.maps.InfoWindow({
         size: new google.maps.Size(150,50),
         disableAutoPan: true
         });

      google.maps.event.addListener(marker, 'mouseover', function() {
           marker.setIcon(icon2);
           infowindow.setContent(locations[i]);
           infowindow.open(map, marker);

       });

       google.maps.event.addListener(marker, 'mouseout', function() {
              marker.setIcon(icon1);
              infowindow.setContent(locations[i]); 
              infowindow.close(map, marker);

         });


      return marker;
    }




    var map = new google.maps.Map(document.getElementById('map'), {
        zoom : 10,
        center : new google.maps.LatLng(28.6139, 77.2089),
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });

    //var infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50)});

    var geocoder = new google.maps.Geocoder();

    for (var i = 0 ; i < locations.length; i++) {
         geocodeAddress(i);


    // link to the sidebar HTML that will open the info window for the record being processed    
    side_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br />';

    document.getElementById("side_bar").innerHTML = side_html;

    }//end of for loop
</script>

I am getting proper markers in the output, but as the sidebar links i am getting whole of the name array each time and the link is not responding even to click events.

Answer 1

Solved my problem at last!

I needed to split my array of strings first before using them to display in the sidebar link.

  var name = names[i].split(",");

Final Soltion code:

    for (var i = 0 ; i < locations.length; i++) 
    {
    geocodeAddress(i);

    var name = names[i].split(",");

    side_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br />';
    }

    document.getElementById("side_bar").innerHTML = side_html;

Answer 2

if "name" is an array, this should work:

    for (var i = 0 ; i < locations.length; i++) {
      geocodeAddress(i);
      // link to the sidebar HTML that will open the info window for the record being processed    
      side_html += '<a href="javascript:myclick(' + i + ')">' + name[i] + '</a><br />';
    }//end of for loop
    document.getElementById("side_bar").innerHTML = side_html;