How to integrate spiderfier js with gmaps4rails gem? (Several markers on the same plate, lng)

Question

I'm trying a little to integrate spiderfier https://github.com/jawj/OverlappingMarkerSpiderfier with https://github.com/apneadiving/Google-Maps-for-Rails

In my map.html.haml:

= 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 }}; 

This works great, but how to integrate spiderfier https://github.com/jawj/OverlappingMarkerSpiderfier#how-to-use ?

Answer 1

This is an old question using the old version of Gmaps 4 Rails, however anyone who is interested in working with both libs in their latest versions, here's how to do it.

This example is based on sample documentation 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()); }); }); 

It’s important here to move on to our own Google objects that Gmaps4Rails wraps inside its classes.

If you need click events on your markers, add one handler to oms , as explained in the document .