spiderfier js와 gmaps4rails gem을 통합하는 방법은 무엇입니까? (같은 위도, LNG에 여러 마커)

Question

내 map.html.haml에서 spiderfier https://github.com/jawj/OverlappingMarkerSpiderfier와 https://github.com/apneadiving/Google-Maps-for-Rails

을 통합하려고 조금 사투를 벌인거야 :

= gmaps(:markers => {:data => @map, :options => { "rich_marker" => true, :raw => '{ animation: google.maps.Animation.DROP }' } }, :map_options => { :draggable => true, :auto_zoom => false, :zoom => 9, :disableDefaultUI => false, :scrollwheel => true, :disableDoubleClickZoom => true, :custom_infowindow_class => "province" }) 

- content_for :scripts do 
:javascript 
    Gmaps.map.infobox = function(boxText) { 
     return { 
      content: boxText 
      ,disableAutoPan: false 
      ,maxWidth: 0 
      ,pixelOffset: new google.maps.Size(-140, -50) 
      ,alignBottom: true 
      ,zIndex: 999 
      ,hideCloseButton: false 
      ,boxStyle: { 
       background: "white" 
       ,width: "280px" 
       ,padding: "10px" 
       ,border: "1px solid #b2b2b2" 
       ,arrowStyle: 0 
       ,arrowPosition: 50 
       ,arrowSize: 20 
       } 

      ,infoBoxClearance: new google.maps.Size(10, 10) 
      ,isHidden: false 
      ,pane: "floatPane" 
      ,enableEventPropagation: false 

    }}; 

이 잘 작동하지만 어떻게 것 하나는 spiderfier https://github.com/jawj/OverlappingMarkerSpiderfier#how-to-use을 통합?

Answer 1

이것은 이전 버전의 Gmaps 4 Rails를 사용하는 오래된 질문이지만, 최신 버전에서 두 라이브러리를 모두 사용하는 데 관심이있는 사람에게는 다음과 같은 방법이 있습니다.

이 예제는 여기에서 중요한 것은 기본 Google에 내려하는 것입니다 documentation sample code

handler = Gmaps.build('Google'); 
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 
    markers = handler.addMarkers([ 
    { 
     "lat": 0, 
     "lng": 0, 
     "picture": { 
     "url": "https://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png", 
     "width": 36, 
     "height": 36 
     }, 
     "infowindow": "hello!" 
    } 
    ]); 
    handler.bounds.extendWith(markers); 
    handler.fitMapToBounds(); 

    // Create a OverlappingMarkerSpiderfier instance 
    var oms = new OverlappingMarkerSpiderfier(handler.getMap(), { 
    keepSpiderfied: true 
    // Other options you need 
    }); 

    // Track each marker with OMS 
    _.each(markers, function(marker) { 
    oms.addMarker(marker.getServiceObject()); 
    }); 
}); 

을 기반으로 Gmaps4Rails는 자신의 클래스 안에 래핑 것을 객체된다.

마커에서 클릭 이벤트가 필요하면 으로 설명 된대로 oms에 단일 처리기를 추가하십시오.