刷新infowindows的部分集合

Question

目前我正在使用Gmaps4Rails并让我的infowindows更新我的部分收集。但是，当我的infowindows刷新时，部分的集合将放在一个infowindow中。我需要一种方法将部分连接到Gmaps4Rails中的每个标记。最终，每个标记都会有一个部分刷新，但是当调用刷新函数时，当前正在一个infowindow中渲染所有5个部分。

这是我的控制器动作

class WelcomeController < ApplicationController


def index
    @events = Event.all
    @lat_lng ||= cookies[:lat_lng] ? cookies[:lat_lng].split("|") : nil
    @locations= Event.where( "date(start) = ?", Date.today).all
    @hash = Gmaps4rails.build_markers(@locations) do |location, marker|
      marker.lat location.latitude
      marker.lng location.longitude
      marker.infowindow render_to_string(:partial => "info", :locals => { :event => location })
      marker.picture({
        "url" => "https://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png",
        "width" => 32,
        "height" => 37
      })
    end
  end
    def refresh

    @lat_lng ||= cookies[:lat_lng] ? cookies[:lat_lng].split("|") : nil
    @locations= Event.where( "start = ?", Date.today).all
    render :partial => 'welcome/info/', :collection => @locations, :as => :event

   end
end
end

我偏爱顶部的局部变量 - 这是我的欢迎/信息部分。

.event-data{id: event.id}
  .row
    .small-3.columns.mright
      .avatar
        %img.avatar{:src => event.user.avatar(:thumb), class: 'th'}
    .small-6.columns.mleft.left-border
      .truckname
        %strong
        = event.user.truckname
      .address
        = event.address
      .times  
        = event.start.strftime('%I:%M')
        to
        = event.end.strftime('%I:%M') 

    .small-2.columns.left-border
      .distance
        =number_with_precision(event.distance_to(cookies[:lat_lng].split("|")), precision: 2)
        %br
        miles away

这是我用控制器操作调用刷新的javascript。

:javascript

    var styles = [
      {
        featureType: 'landscape',
        elementType: 'all',
        stylers: [
          { hue: '#f9f4f0' },
          { saturation: 22 },
          { lightness: 63 },
          { visibility: 'on' }
        ]
      },{
        featureType: 'road',
        elementType: 'all',
        stylers: [
          { hue: '#b9ded6' },
          { saturation: -64 },
          { lightness: 44 },
          { visibility: 'on' }
        ]
      },{
        featureType: 'water',
        elementType: 'all',
        stylers: [
          { hue: '#bccecb' },
          { saturation: -66 },
          { lightness: 5 },
          { visibility: 'on' }
        ]
      },{
        featureType: 'poi',
        elementType: 'all',
        stylers: [
          { hue: '#bccecb' },
          { saturation: -64 },
          { lightness: -1 },
          { visibility: 'on' }
        ]
      },{
        featureType: 'administrative',
        elementType: 'labels',
        stylers: [
          { hue: '#d8444c' },
          { saturation: 65 },
          { lightness: 10 },
          { visibility: 'on' }
        ]
      }
    ];

  var marker;
  var updatedmarkers;
  var truckmarkers;
  var geolocatedmarker;
  var lat;
  var lng;
  var cookie_val;

  function setCoords(position){
    lat = position.coords.latitude;
    lng = position.coords.longitude;
  };

  function setGeoCookie() {
    cookie_val = lat + "|" + lng;
    document.cookie = "lat_lng=" + escape(cookie_val);
  }

  function displayOnMap(position){
    geolocatedmarker = handler.addMarker({
      lat: position.coords.latitude,
      lng: position.coords.longitude,
      infowindow: 'Current Position',
      picture: {
      "url": "http://www.galbraithmt.com/guide/wp-content/uploads/2014/02/bluedot.png",
      "width":  36,
      "height": 36,
      },
    });
    handler.map.centerOn(geolocatedmarker);
    handler.getMap().setZoom(17);
    handler.getMap().setOptions({ scrollwheel: false })
    truckmarkers = handler.addMarkers(#{raw @hash.to_json});
  };

  var handler = Gmaps.build('Google', { markers: { maxRandomDistance: null }, builders: { Marker:   InfoBoxBuilder} });
  handler.buildMap({ internal: {id: 'geolocation'}, provider: {styles: styles} }, function(){
    if(navigator.geolocation)
      navigator.geolocation.getCurrentPosition(setCoords);
      navigator.geolocation.getCurrentPosition(setGeoCookie);
      navigator.geolocation.getCurrentPosition(displayOnMap);
  });

  $('#geocodeID').click(function(){
    var user_input = $('input[name="inputbox"]').val();
    geocodeAddress(user_input);
  });

  function geocodeAddress(input){
    //var address = document.getElementById("address").value;
    geocoder = new google.maps.Geocoder();
    address = input;

    geocoder.geocode( {'address': address}, function(results, status)
    {
        if ( marker != null ){
          handler.removeMarker(marker);
        }
        marker = handler.addMarker({
          lat: results[0].geometry.location.lat(),
          lng: results[0].geometry.location.lng(),
          infowindow: 'Destination You Selected',
          picture: {
                        "url": "http://www.galbraithmt.com/guide/wp-content/uploads/2014/02/bluedot.png",
                        "width":  36,
                        "height": 36
                    },
        });
        lat = results[0].geometry.location.lat();
        lng = results[0].geometry.location.lng();
        setGeoCookie();
        handler.map.centerOn(marker);
        handler.removeMarker(geolocatedmarker);

      });
    $(document).ready(
          function() {
            setInterval(function() {

              $('.event-data').load('/welcome/refresh/');
          }, 3000);
    });
  }