Question

I wonder whether someone may be able to help me please.

I’m am relatively new to JavaScript programming, so I ask please for your patience.

I’ve put together this page, which allows users to add or remove Google Map markers via ‘Marker Category’ check box selection. In addition to the relevant markers being added and removed from the map, the description for each marker is added or removed from a ‘Sidebar; which is shown in orange text.

If the user clicks on the ‘Sidebar’ item, the info window for the relevant marker will be displayed, and if the marker is selected, the relevant description in the sidebar listing will be highlighted with a grey background.

The problem I have is if a user selects a marker on the map the sidebar doesn’t automatically scroll to the item relevant list item as shown in the example on this page.

I am using a third party script to create the scroll bar which is shown in the code below:

<script>
        (function($){
            $(window).load(function(){
                $("#sidebar").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });
                //ajax demo fn
                $("a[rel='load-content']").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        url=$this.attr("href");
                    $.get(url,function(data){
                        $("#sidebar .mCSB_container").html(data); //load new content inside .mCSB_container
                        $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content
                        $("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top
                    });
                });
                $("a[rel='append-content']").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        url=$this.attr("href");
                    $.get(url,function(data){
                        $("#sidebar .mCSB_container").append(data); //append new content inside .mCSB_container
                        $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly appended content
                    });
                });
            });
        })(jQuery);
</script>

and this is the section of code that links the map marker and sidebar item.

google.maps.event.addListener(marker, 'click', function() { 
  infowindow.setContent(contentString);
  $("#sidebar a").css('background-color','');//remove sidebar links back colors
  sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
  sidebarlink.css('background-color','#DADADA');
  infowindow.open(map,marker); 
});

I have tried to put a overflow item in both areas, hoping that this would solve the problem. In addition, I’ve also omitted the following lines to see whether I could come up with a solution:

$("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content                          
$("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top

Unfortunately my attempts haven’t solved the issue.

I just wondered whether someone may be able to look at this please and let me know where I’m going wrong.

Many thanks and kind regards

Answer 1

Just add the following line, to your marker click event handler:

$("#sidebar").mCustomScrollbar("scrollTo","a:contains('"+marker.mydescription+"')");

so your code would look like:

google.maps.event.addListener(marker, 'click', function() { 
  infowindow.setContent(contentString);
  $("#sidebar a").css('background-color','');//remove sidebar links back colors
  sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
  sidebarlink.css('background-color','#DADADA');
  $("#sidebar").mCustomScrollbar("scrollTo","a:contains('"+marker.mydescription+"')");
  infowindow.open(map,marker); 
});

that should scroll to your clicked item.