gmaps4rails change marker color when hovering over item in sidebar

Question

I'm trying to get this behavior with gmaps4rails : User hovers over a box in the sidebar (with pictures of the building the marker is on), corresponding marker on the map changes image/color in order to make the selected one stand out from the others.

I know rails medium-well, but I really suck at javascript.

I saw this code from a previous similar question:

Gmaps.map.callback = function(){
for(var i = 0; i < Gmaps.map.markers.length; i++){
  marker = Gmaps.map.markers[i];
  google.maps.event.addListener(marker.serviceObject, 'click', 
  (function(marker){
    return function(){
     console.log($(marker.serviceObject.ne.ga).attr("src", "/assets/marker_sprite2.png"));
    }
  })(marker)
  )
  }
}

but I don't know where to put it in my app or how to relate it to the items in the sidebar.

Sorry to ask such a basic question. Please help?

Answer 1

I had the exact same question and here is my (partial) solution:

Assuming you've set up your rails app like is shown on the youtube video (linked to on the github page https://github.com/apneadiving/Google-Maps-for-Rails).

Add marker.json({ :id => location.id }) to your controller so it ends up like this:

@hash = Gmaps4rails.build_markers(@locations) do |location, marker|
  marker.lat location.latitude
  marker.lng location.longitude
  marker.infowindow "$#{location.suggested_price}, #{location.address}"
  marker.json({ :id => location.id })
end

then, in your view under the javascript to build a map, add a .each function that goes through each piece of json and adds functionality to its corresponding class in your view (I'm assuming you're wrapping each of your sidebar items with a div called "location-<%= location.id %>":

handler = Gmaps.build('Google', { markers: { maxRandomDistance: null } });
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){

  markers = handler.addMarkers(<%=raw @hash.to_json %>);

  _.each(<%=raw @hash.to_json %>, function(json, index){
    json.marker = markers[index];
    $(".location-" + json.id).on('mouseover', function() {
      handler.getMap().setZoom(14);
      json.marker.setMap(handler.getMap()); //because clusterer removes map property from marker
      json.marker.panTo();
      google.maps.event.trigger(json.marker.getServiceObject(), 'click');
    });
    });
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
  handler.getMap().setCenter(new google.maps.LatLng(<%= @city.latitude %>, <%= @city.longitude %>));
  handler.getMap().setZoom(14);
});

I stole this from one of apneadiving's examples (and just removed all the pretty refactoring).

Now, in my example, instead of changing the color of the marker, I'm centering the map over the corresponding marker and opening up the infowindow. All you have to do is change the code in the function to whatever behavior you want, replacing this part:

      handler.getMap().setZoom(14);
      json.marker.setMap(handler.getMap()); //because clusterer removes map property from marker
      json.marker.panTo();
      google.maps.event.trigger(json.marker.getServiceObject(), 'click');

Hope that helps!