Rails - GMAP - デフォルトのマーカータイプに応じてマウスアウトのマーカーアイコンを設定

Question

マップ上のマーカー付きレールアプリ（ピンクマーカー）を持っています。サイドバーにマーカーをマスコンすると、マーカーの色が青色に変わります（地図上で説明するため）、次にマウスアウトしたときに元の色のピンクに戻ります。（うまく作業）

しかし、今度は他の色を追加しました：マーカーを（地図上またはサイドバーに直接）をクリックすると、マーカーの色が灰色になります。私のユーザーが彼らがすでにそのマーカーから情報をチェックしていることを知ることを許可する

だから私がサイドバーから灰色のマーカーにマウスであれば、マーカーは青（普通）になりますが、マウスアウトの場合、ILはピンクになり、灰色になるはずです。

ピンクがピンクに戻ったら 灰色が灰色に戻ったら どうやってやるの ？一種の属性を持つ？

<script type="text/javascript">

  $(document).ready(function(){
    var raw_markers = <%=raw @hash.to_json %>;
    var input = (document.getElementById('pac-input'));
    var autocomplete = new google.maps.places.Autocomplete(input);

    function createSidebarLi(json){
      return json.sidebar;
      //return ("<li>" + json.titre + ' ' + json.address + "</li>");
    };

    function bindLiToMarker($li, marker){
      $li.on('click', function(){
        //handler.getMap().setZoom(14);
        marker.setMap(handler.getMap()); //because clusterer removes map property from marker
        marker.panTo();
        google.maps.event.trigger(marker.getServiceObject(), 'click');
      });
    };

    function bindLiToMarkerMouseOver($li, marker){
      $li.on('mouseover', function(){
        //handler.getMap().setZoom(14);
        marker.setMap(handler.getMap()); //because clusterer removes map property from marker
        marker.panTo();
        //google.maps.event.trigger(marker.getServiceObject(), 'click');
        marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerBleu.png");
      });
    };

    function bindLiToMarkerMouseOut($li, marker){
      $li.on('mouseout', function(){
        //handler.getMap().setZoom(14);
        marker.setMap(handler.getMap()); //because clusterer removes map property from marker
        marker.panTo();
        //google.maps.event.trigger(marker.getServiceObject(), 'click');
        **if (marker.isVisited = true) {
          marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerGris.png");
        } else {
          marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerRose.png");
        }**
      });
    };

    function createSidebar(json_array){
      _.each(json_array, function(json){
        var $li = $( createSidebarLi(json) );
        $li.appendTo('#markers_list');
        bindLiToMarker($li, json.marker);
        bindLiToMarkerMouseOver($li, json.marker);
        bindLiToMarkerMouseOut($li, json.marker);
      });
    };

    function closeInfoWindow(handler){
      if(handler.currentInfowindow()) {
        handler.currentInfowindow().close();
      }
    }

    handler = Gmaps.build('Google', { builders: { Marker: InfoBoxBuilder} });
    //handler = Gmaps.build('Google');
    handler.buildMap({ internal: {id: 'map'}}, function(){

      var markers = handler.addMarkers(raw_markers);

      _.each(raw_markers, function(json, index){
        var marker = markers[index];
        json.marker = marker;
        //google.maps.event.addListener(marker.getServiceObject(), 'mouseover', function(){
          //google.maps.event.trigger(marker.getServiceObject(), 'click');
        //});
        google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
          marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerGris.png");
          **marker.isVisited = true;**
        });
      });

      createSidebar(raw_markers);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.centerMapOnUser();

      google.maps.event.addListener(handler.getMap(), 'click', function(){ 
        closeInfoWindow(handler);
      });

      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
      });

    });

  });

</script>

.

Answer 1

SET visited= Clickイベント：

google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
          marker.serviceObject.set("isVisited", true);
        });

.

訪問した場合= TRUEマウスSetIcon Grey、Else SetIcon Pink

function bindLiToMarkerMouseOut($li, marker){
      $li.on('mouseout', function(){
        marker.setMap(handler.getMap());
        if (marker.serviceObject.get("isVisited")) {
          marker.serviceObject.setIcon("path_to/greyMarker.png");
        } else {
          marker.serviceObject.setIcon("path_to/pinkMarker.png");
        };
      });
    };

.