Googleマップのリロードマーカーがズームをリフレッシュします

Question

私はgmaps4rails gemに従っており、setinterval関数でマーカーをリロードできました。私が直面している問題は、マップが元の状態に戻るたびに、つまり、ズームインされていれば正常に戻ります。

これは、私はあなたがコードサンプルのため、このthreadで参照することがマーカー

update_marker_data = (handler) -> 
    markers = [] 
    $.ajax '/technician_locations/current_location', 
    type: 'GET' 
    success: (data, jqxhr, status) -> 
     # handler.removeMarkers() 
     console.log(data) 
     tech_markers_from_api = data.technician_locations 
     tech_markers = handler.addMarkers(tech_markers_from_api) 
     _.each tech_markers,(marker, j) -> 
     markers.push(marker) 
     # google.maps.event.addListener marker.serviceObject, 'click', (object) -> 
     # render_marker_data tech_markers_from_api[j].id 
     # return 
     # handler.bounds.extendWith tech_markers 
     setInterval() -> 
     $ -> remove_marker(markers) 
     , 9000 
     handler.fitMapToBounds() 

Answer 1

を更新するごとに10秒のコード

success: (data, jqxhr, status) -> 
    console.log('data.bookings', data) 
    $('#multi_markers').removeClass('hidden') 
    $('.empty_booking_text').removeClass('hidden') 
    $('#sidebar_container').html('Please click any booking marker on the map') 
    markers_from_api = data.bookings 
    handler = Gmaps.build('Google') 
    settings = { 
    internal: { 
     id: 'multi_markers' 
    }, 
    provider:{ 
     styles: mapStyles 
    } 
    } 
    handler.buildMap settings, -> 
    markers = handler.addMarkers(markers_from_api) 
    _.each markers,(marker, j) -> 
     google.maps.event.addListener marker.serviceObject, 'click', (object) -> 
     console.log marker.serviceObject.position.lng() 
     render_marker_data markers_from_api[j].id 
     return 
    handler.bounds.extendWith markers 
    handler.fitMapToBounds() 
    setInterval() -> 
    $ -> update_marker_data(handler) 
    , 10000 

です。 AJAXを使用してx間隔でマーカーを置き換えるだけです。

<script> 
    handler = Gmaps.build('Google'); 
     handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
      markers = handler.addMarkers(<%=raw @hash.to_json %>); 
      handler.bounds.extendWith(markers); 
      $(document).ready(function() {   
      setInterval(function(){ 
       $(function() { 
        $.ajax({ 
         type:"GET", 
         url:"/path_to_controller_action", 
         dataType:"json", 
         data: {some_id:1}, 
         success:function(result){      
         for (var i = 0; i < markers.length; i++) { 
          markers[i].setMap(null); 
          handler.removeMarkers(markers); 
         } 
         markers = []; 
         markers = handler.addMarkers(result); 
         handler.bounds.extendWith(markers);       
         } 
        }) 
       }); 
       }, 10000); 
      handler.fitMapToBounds(); 
      handler.getMap().setZoom(17);  
      });    
     }); 
</script>