Yes, It is possible with spider js. Example: https://jawj.github.io/OverlappingMarkerSpiderfier/demo.html
Library: https://github.com/jawj/OverlappingMarkerSpiderfier
If you face trouble to implement the library, I have already implemented it in my previous project.
Include JS file in FOOTER or The very bottom of your template. It will good if you download the js in your server and load from your server, It will increase the speed of loading the JS file.
http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js
Put Following code in your template for map. Make sure you have icon in your /images/map-pin.png
directory.
{!--
======================================================
Include map
======================================================
--}
{exp:gmap:init id="map" class="gmap" style="width:100%;height:820px;" scrollwheel="false"}
{!-- Set Map Markers --}
{exp:channel:entries channel="map" disable="categories|category_fields|member_data|pagination|trackbacks|relationships" dynamic="no"}
{if map_latitude && map_longitude}
{exp:gmap:marker id="map" latitude="{map_latitude}" longitude="{map_longitude}" icon="/images/map-pin.png"}
<div class="map-address">
<h2>{title}</h2>
<a href="/map/{url_title}">View Details</a>
</div>
{/if}
{/exp:gmap:marker}
{/exp:channel:entries}
Put the following Script in your template
<script type="text/javascript">
window.onload = function() {
var gm = google.maps;
var iw = new gm.InfoWindow();
var oms = new OverlappingMarkerSpiderfier(map_map,
{markersWontMove: true, markersWontHide: true});
var usualColor = 'ffee22';
var spiderfiedColor = 'eebb22';
var iconWithColor = function(color) {
return 'https://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
color + '|000000|ffff00';
}
var shadow = new gm.MarkerImage(
'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
new gm.Size(37, 34),
new gm.Point(0, 0),
new gm.Point(10, 34)
);
oms.addListener('click', function(marker) {
iw.setContent(marker.desc);
iw.open(map_map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon('/images/map-pin.png');
markers[i].setShadow(shadow);
}
});
var bounds = new gm.LatLngBounds();
$.each(map_markers, function(x, marker) {
var lat = marker.getPosition().lat();
var lon = marker.getPosition().lng();
var loc = new gm.LatLng(lat, lon);
bounds.extend(loc);
var new_marker = new gm.Marker({
position: loc,
map: map_map,
icon: '/images/map-pin.png',
shadow: shadow
});
new_marker.desc = marker.window.content;
oms.addMarker(new_marker);
marker.setMap(null);
});
map_map.fitBounds(bounds);
// for debugging/exploratory use in console
window.map = map_map;
window.oms = oms;
}
</script>
This is it. If you facing issue to load the map or in spidify clustering, Check the errors in console and comment here. I will help on that. All the best.