Google지도 다시로드 표시 자 줌을 새로 고침

Question

gmaps4rails 보석을 팔로우하고 있으며 setinterval 기능으로 마커를 다시로드 할 수있었습니다. 내가 직면하고있는 문제는지도가 원래대로 돌아갈 때마다, 즉 확대 된 경우 정상으로 돌아갑니다.

이

코드

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 

내가 마커

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

당신은 코드 샘플이 thread로 참조 할 수 있습니다에게 업데이트 매 10 초입니다. 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>