Карта Google в режиме реального времени

Question

У меня есть карта google, отображаемая на странице, с маркерами в каждом местоположении с другим маркером на основе каждого состояния местоположения.

Я хочу, чтобы обновление было обновлено: карта должна быть повторно отображена для всех, кто ее просматривает. Это означает, что все маркеры будут обновляться, поэтому ни один пользователь не будет смотреть на старые индикаторы маркера.

Как я могу это достичь? Я попытался использовать render_Sync, но, видимо, render_sync gem приходится загружать всю коллекцию отдельно. Это означает, что он пытается отобразить карту столько раз, сколько места, где есть, что отправляет слишком много запросов на Карты Google и терпит неудачу/ломает ее.

Answer 1

Ваша карта google инициализируется в вашем представлении с помощью вызова Javascript. Вам просто нужно написать метод, который совершает повторные вызовы на ваш контроллер или другой сервер REST через определенные промежутки времени. После каждого успешного ответа вы обновите свои позиции маркеров.

Нечто подобное:

<script type="text/javascript"> 

var handler = Gmaps.build('Google'); 
var markers = []; 
var once = true; 
$(document).on('rails_admin.dom_ready', function() { 
    handler.buildMap({ provider: {maxZoom: 20, zoom: 15}, internal: {id: 'map'}}, function(){ 
     getMarker(); 
     window.setInterval(getMarker, 5000); 
    }); 

}); 


    function getMarker() { 
     $.post('/api/v1/get_position', 
       { 
        uuid: '<%= @object.uuid %>' 
       }, 
     function (data, status) { 
      handler.removeMarkers(markers); 
      markers = []; 
      markers = handler.addMarkers([ 
       { 
        "lat": data.lat, 
        "lng": data.lng, 
        "infowindow": "<%= @object.name %>" 
       } 
      ]); 
      if (once) { 
       handler.fitMapToBounds(); 
       handler.bounds.extendWith(markers); 
       handler.map.centerOn({ lat: data.lat, lng: data.lng }); 
       once = false; 
      } 
      console.log(data); 
     }); 
    }; 

</script> 


<div style="width: 800px;"> 
    <div id="map" style="width: 800px; height: 600px;"></div> 
</div>