Question

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

Firstly, I am relatively new to this, so may I ask for your patience please.

I’ve put together this page which allows users to show and hide Google Map markers and associated ‘Sidebar’ items pertinent to the ‘Category’ check box they select.

What I’m now trying to, and having great difficulty in doing, is to change the format of the sidebar, so that it resembles the one shown on this page.

As with the example from the link above, I’d also like to add the functionality whereby if the map marker is clicked, the associated sidebar item is highlighted.

I’ve been trying to get this to work for quite some time now, but I just seem to be going around in circles.

I just wondered whether someone may be able to look at this please and offer some guidance on how I may be able to go about achieving this.

Many thanks and kind regards

Answer 1

I gave it a go, just replace your following code:

google.maps.event.addListener(marker, 'click', function() { 
   infowindow.setContent(contentString);
   infowindow.open(map,marker); 
});

for this one:

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','#58FAD0');
   infowindow.open(map,marker); 
});

that will set a background color to the sidebar link, you can change the color to whatever you want or add any other css styles you prefer to your link.

Also make sure your description text in the mydescription variable does never contains a quot ' or double quote " as would make above code to fail.

Let me know if this work as you expected.

Also, if you wish to also remove the background color from the sidebar links when you click anywhere your map(e.g. clicking outside of markers) do it by replacing your following code:

google.maps.event.addListener(map, 'click', function() { 
   infowindow.close(); 
});

for this one:

google.maps.event.addListener(map, 'click', function() { 
   $("#sidebar a").css('background-color','');//remove sidebar links back colors
   infowindow.close(); 
});

To get the background color changing on hover on sidebar links (issue 1), just add the following piece of css code to any of your <style type="text/css"> blocks:

#sidebar a:hover{
   background-color: #58FAD0;   
}​