Я работаю над веб-приложением и использую Ruby on Rails. Наш индекс состоит из карты и поля поиска. Вы можете искать местоположение, и карта обновляет свои маркеры.

Я хотел бы использовать Ajax, чтобы избежать обновления страницы. Итак, я добавилremote: true к форме, аrespond_to в контроллере и новыйsearch.js.erb. мойsearch.js.erb оказывает частичное_googlemap.erb который содержит скрипт для инициализации карты.

Здесь моя проблема. Поскольку карта уже существует, это как если бы я хотел создать один и тот же объект дважды, что, конечно, не работает и ужасно. Я хочу обновить только маркеры на карте новыми. Но я не могу найти способ сделать это.

Я видел, как прежняя версия Gmaps4rails интегрировала способ сделать это (Gmaps.map.replaceMarkers(your_markers_json_array); ) но сейчас это не похоже на работу. Когда я использую его, я получил эту ошибку:TypeError: Gmaps.map is undefined". Я пытался с"handler.replaceMarkers();"но на этот раз у меня есть"TypeError: handler.replaceMarkers is not a function».

Я новичок в Javascript и в Rails, но я хочу улучшить свои знания, и мне действительно нужно продолжить с этим веб-приложением. Я искал решение везде в интернете, но тщетно.

Живой сайт здесь

Пожалуйста, кто-нибудь может сказать мне, как я могу это сделать и что я делаю неправильно?

Спасибо заранее,

Céline

zones_controller.rb

def search
   respond_to do |format|
     format.html.none do
      search_params = params[:zone][:search]
         coordinates = Geocoder.coordinates(search_params).join(",")
         @zones = Zone.search(
           "", { "aroundLatLng" => coordinates, 
                  "aroundRadius" => 500000  #Searches around 500 km
                })
         if coordinates.nil?
           @zones = Zone.search(params[:search])
         elsif @zones.empty?
           @zones = Zone.all
           flash[:error] = "No zone could be found. Please try again."
         end
       build_map(@zones)
     end

     format.js
   end
end

def build_map(array)
  @hash = Gmaps4rails.build_markers(array) do |zone, marker|
    marker.lat zone.latitude
    marker.lng zone.longitude
    marker.json({ title: zone.description, id: zone.id })
    marker.infowindow render_to_string(:partial => "/zones/map_box", locals: { zone: zone })
  end
end

search.html.erb

    <div id="map" style='width: 100%; height: 700px;'>
</div>
  <!-- Beginning Google maps -->

<script type="text/javascript" id="map_script">
   $(document).ready(function() {
     <%= render 'googlemap', hash: @hash %>
   }); // Document ready
</script>

_googlemap.erb

handler = Gmaps.build('Google');
handler.buildMap({ provider: {
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }, internal: {id: 'map'}
}, function(){
  markers_json = <%= raw hash.to_json %>;
  markers = _.map(markers_json, function(marker_json){

    marker = handler.addMarker(marker_json);
    handler.getMap().setZoom(4);

    _.extend(marker, marker_json);

    marker.infowindow = new google.maps.InfoWindow({
      content: marker.infowindow
    });

    return marker;
  });

  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

search.js.erb

$('#map_script').replaceWith("<%= render 'googlemap', hash: @hash %>");