Google Maps for Rails — обновление маркеров с помощью AJAX

Почему бы вам просто не обновить карту новыми маркерами? Это означает, что вместо повторной визуализации всей карты после каждого поиска просто обновите маркеры на существующей карте, удалив все маркеры и добавив новые.

Я не проверял этот метод, но я думаю, что он должен работать и быть более эффективным:

Создайте файл app/assets/javascript/map.js. Вы можете хранить там свои функции, связанные с картой. Создайте функцию для обновления маркеров вашей карты в этом файле:

карта.js

(function() {
  /* __markers will hold a reference to all markers currently shown
     on the map, as GMaps4Rails won't do it for you.
     This won't pollute the global window object because we're nested
     in a "self-executed" anonymous function */
  var __markers;

  function updateMarkers(map, markersData) 
  {
    // Remove current markers
    map.removeMarkers(__markers);

    // Add each marker to the map according to received data
    __markers = _.map(markersData, function(markerJSON) {
      marker = map.addMarker(markerJSON);
      map.getMap().setZoom(4); // Not sure this should be in this iterator!

      _.extend(marker, markerJSON);

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

      return marker;
    });

    map.bounds.extendWith(__markers);
    map.fitMapToBounds();
  };

  // "Publish" our method on window. You should probably have your own namespace
  window.updateMarkers = updateMarkers;
})();

Эту функцию можно использовать для инициализации вашей карты и ее обновления. Поскольку вы не будете (если мой ответ вас удовлетворит) отображать карту дважды, вы можете удалить _google_map.erb и поместить ее содержимое обратно в search.html.erb, но используя только что созданную функцию:

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() {
       mapHandler = Gmaps.build('Google');
       mapHandler.buildMap({ provider: {
           disableDefaultUI: true,
           mapTypeId: google.maps.MapTypeId.TERRAIN
         }, internal: {id: 'map'}
       }, function(){
         var markersData = <%= raw @hash.to_json %>;
         updateMarkers(mapHandler, markersData);
       });
   }); // Document ready
</script>

Пожалуйста, не забудьте ключевое слово var при объявлении переменных, иначе они станут глобальными, а это плохо ^^
Обратите внимание, что я намеренно оставил mapHandler глобальной переменной: вам понадобится доступ к вашему обработчику для обновления маркеров позже, когда кто-то использует поиск. Это, вероятно, не идеальный вариант, но этот вопрос не о рефакторинге вашего кода, так что давайте оставим его таким.

Итак, теперь мое решение предоставляет вам карту, которая инициализируется заданными маркерами при загрузке страницы. Другими словами, ничего не изменилось!

Однако теперь вам разрешено повторно использовать эту updateMarkers функцию для изменения маркеров, отображаемых на вашей карте. Вот что должен делать ваш search.js.erb скрипт:

search.js.erb

(function() {
  var markersData = <%= raw @hash.to_json %>;
  updateMarkers(mapHandler, markersData);
})();

Вот и все! Надеюсь, это приведет вас к следующему шагу вашего проекта :)

Я пробовал то же самое, но вместо обновления marker вы должны включить карту в partial/placeholder, а затем обновить ее ...

например, это представление, отображающее карту... я обновлю это представление/заполнитель последней картой и маркерами

<div id="map_users_index">
<div id="map" class="map" style="height:relative;">
</div>

в users_controller.rb

   ##take index action or any other action 
    def index
    ##do your stuff and get more users
         respond_to do |format|
           format.html 
           format.js
         end
    end

в index.js.erb

##update the placeholder/partial with new map with new markers

$("#map_users_index").html("<%= escape_javascript(render(:partial => 'index')) %>");

У МЕНЯ ЕСТЬ СОБСТВЕННЫЙ РАБОЧИЙ КОД...ЗДЕСЬ