google-maps-api-3markerspiderfier
Google Maps API OverlappingMarkerSpiderfier - overlapping markers are NOT NUDGED
var map;
var Sightings = [
{lat:20.735280,lng:-105.401653,title:"Tournefortia hartwegiana",code:'TOHA',sightingid:'40888'},
{lat:20.735280,lng:-105.401653,title:"Heermann's Gull",code:'HEGU',sightingid:'40869'},
{lat:20.735397,lng:-105.401703,title:"Belted Kingfisher",code:'BEKI',sightingid:'40877'}
];
const sightingIcon = {
path: "M 0 0 L 4 -4 L 4 -16 L 26 -16 L 26 -34 L -26 -34 L -26 -16 L -4 -16 L -4 -4 Z",
fillOpacity:1,
fillColor:"#ffcc00",
strokeWeight:1,
strokeColor:"#000",
scale:1,
labelOrigin: {x:0, y:-25}
};
function initMap(){
map = new google.maps.Map(document.getElementById('GoogleMap'), {mapTypeId: 'satellite',streetViewControl:false,overviewMapControl:true,scaleControl:true});
var bounds = new google.maps.LatLngBounds();
var oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true,
nudgeRadius: 20,
nearbyDistance: 40,
circleSpiralSwitchover: 8,
spiralFootSeparation:20,
spiralLengthStart: 16,
spiralLengthFactor: 12,
circleFootSeparation:50,
circleStartAngle: 180});
var markers = new Array();
for (var i = 0; i < Sightings.length; i++) {
bounds.extend(Sightings[i]);
var markerData = Sightings[i];
var marker = new google.maps.Marker({position:Sightings[i], title: Sightings[i].title, label: Sightings[i].code, opacity: 1, icon: sightingIcon});
markers.push(marker);
marker.addListener('spider_click', function(e) {});
oms.addMarker(marker);
}
var markerCluster = new MarkerClusterer(map, markers,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',maxZoom:18});
map.fitBounds(bounds);
}<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>
<script src='https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js'></script>
<script defer src='https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY'></script>
<body>
<h1>Hello World</h1>
<div id='GoogleMap' style='height: 600px; width: 100%;'></div>
</body>
</html>I am using Google Maps API for Javascript on a web page. Creating several Markers from an array with Lat/Lng and using overlapping-marker-spiderfier and markerclusterer for their intended use from an example I found elsewhere.
My problem is that Markers still Overlap one another when de-spiderfied/de-clustered. Clicking on the overlapped markers correctly spiderfies them and shows each. This is confusing to the end-user as they don't know that some of the markers are hidden/overlapped and don't click.
I tried using the Nudge options in spiderfier, but they seem to have no effect. The Nudge options are defined here: https://openbase.com/js/overlapping-marker-spiderfier/documentation
I am wondering if I am not referencing the latest Spider code.
Any ideas how to prevent these overlapped markers? TO BE CLEAR, I am trying to get rid of the issue as shown in the 2nd screenshot below, where the markers are overlapping, but should be nudged a bit to the side in order to show multiple markers.
Solution
Use the latest version of the Overlapping Marker Spiderfier (1.1.4) the version that goes with the documentation you reference
To get the cdn link use the combination of the GitHub project: OverlappingMarkerSpiderfier by fritz-c and the version
<script src="https://cdn.jsdelivr.net/gh/fritz-c/OverlappingMarkerSpiderfier@1.1.4/dist/oms.min.js"></script>
Working code snippet:
var map;
var Sightings = [{
lat: 20.735280,
lng: -105.401653,
title: "Tournefortia hartwegiana",
code: 'TOHA',
sightingid: '40888'
},
{
lat: 20.740620,
lng: -105.394615,
title: "Rufous-bellied Chachalaca",
code: 'RBCH',
sightingid: '40862'
},
{
lat: 20.739182,
lng: -105.395732,
title: "Inca Dove",
code: 'INDO',
sightingid: '40863'
},
{
lat: 20.738601,
lng: -105.399059,
title: "Squirrel Cuckoo",
code: 'SQCU',
sightingid: '40864'
},
{
lat: 20.738876,
lng: -105.397491,
title: "Broad-billed Hummingbird",
code: 'BBHU',
sightingid: '40865'
},
{
lat: 20.736121,
lng: -105.403218,
title: "Whimbrel",
code: 'WHIM',
sightingid: '40866'
},
{
lat: 20.736850,
lng: -105.405225,
title: "Spotted Sandpiper",
code: 'SPSA',
sightingid: '40867'
},
{
lat: 20.736135,
lng: -105.403247,
title: "Willet",
code: 'WILL',
sightingid: '40868'
},
{
lat: 20.735280,
lng: -105.401653,
title: "Heermann's Gull",
code: 'HEGU',
sightingid: '40869'
},
{
lat: 20.739167,
lng: -105.395756,
title: "Magnificent Frigatebird",
code: 'MAFR',
sightingid: '40870'
},
{
lat: 20.735632,
lng: -105.401692,
title: "Blue-footed Booby",
code: 'BFBO',
sightingid: '40871'
},
{
lat: 20.738925,
lng: -105.397099,
title: "Brown Pelican",
code: 'BRPE',
sightingid: '40872'
},
{
lat: 20.736121,
lng: -105.403218,
title: "Snowy Egret",
code: 'SNEG',
sightingid: '40873'
},
{
lat: 20.737766,
lng: -105.401894,
title: "Black Vulture",
code: 'BLVU',
sightingid: '40874'
},
{
lat: 20.740601,
lng: -105.394636,
title: "Turkey Vulture",
code: 'TUVU',
sightingid: '40875'
},
{
lat: 20.738880,
lng: -105.397410,
title: "Gray Hawk",
code: 'GRHA',
sightingid: '40876'
},
{
lat: 20.735397,
lng: -105.401703,
title: "Belted Kingfisher",
code: 'BEKI',
sightingid: '40877'
},
{
lat: 20.740608,
lng: -105.394595,
title: "Orange-fronted Parakeet",
code: 'OFPA',
sightingid: '40878'
},
{
lat: 20.740620,
lng: -105.394615,
title: "Greenish Elaenia",
code: 'GREL',
sightingid: '40879'
},
{
lat: 20.740033,
lng: -105.394573,
title: "Social Flycatcher",
code: 'SOFL',
sightingid: '40880'
},
{
lat: 20.737745,
lng: -105.403846,
title: "Tropical Kingbird",
code: 'TRKI',
sightingid: '40881'
},
{
lat: 20.738877,
lng: -105.397251,
title: "Plumbeous Vireo",
code: 'PLVI',
sightingid: '40882'
},
{
lat: 20.738584,
lng: -105.399194,
title: "San Blas Jay",
code: 'SBJA',
sightingid: '40883'
},
{
lat: 20.739244,
lng: -105.396119,
title: "Blue-gray Gnatcatcher",
code: 'BGGN',
sightingid: '40884'
},
{
lat: 20.738886,
lng: -105.397373,
title: "Happy Wren",
code: 'HAWR',
sightingid: '40885'
},
{
lat: 20.738584,
lng: -105.399194,
title: "Sinaloa Wren",
code: 'SIWR',
sightingid: '40886'
},
{
lat: 20.739209,
lng: -105.396036,
title: "Streak-backed Oriole",
code: 'SBOR',
sightingid: '40887'
}
];
const sightingIcon = {
path: "M 0 0 L 4 -4 L 4 -16 L 26 -16 L 26 -34 L -26 -34 L -26 -16 L -4 -16 L -4 -4 Z",
fillOpacity: 1,
fillColor: "#ffcc00",
strokeWeight: 1,
strokeColor: "#000",
scale: 1,
labelOrigin: {
x: 0,
y: -25
}
};
function initMap() {
map = new google.maps.Map(document.getElementById('GoogleMap'), {
mapTypeId: 'satellite',
streetViewControl: false,
overviewMapControl: true,
scaleControl: true
});
google.maps.event.addListener(map, 'click', function(evt) {
console.log(evt.latLng.toUrlValue(6)+" zoom="+map.getZoom());
})
var bounds = new google.maps.LatLngBounds();
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true,
nearbyDistance: 40,
circleSpiralSwitchover: 8,
spiralFootSeparation: 20,
spiralLengthStart: 16,
spiralLengthFactor: 12,
circleFootSeparation: 50,
circleStartAngle: 180,
keepSpiderfied: true,
});
var markers = new Array();
for (var i = 0; i < Sightings.length; i++) {
(function() {
bounds.extend(Sightings[i]);
var markerData = Sightings[i];
var marker = new google.maps.Marker({
position: Sightings[i],
title: Sightings[i].title,
label: Sightings[i].code,
opacity: 1,
icon: sightingIcon
});
markers.push(marker);
marker.addListener('spider_click', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" spider_click")
});
marker.addListener('click', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" click")
});
marker.addListener('format', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" format")
});
marker.addListener('unspiderfy', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" unspiderfy")
});
marker.addListener('spiderfy', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" spiderfy")
});
oms.addMarker(marker);
})();
}
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
maxZoom: 18
});
// map.fitBounds(bounds);
map.setCenter({lat:20.736114,lng:-105.403252});
map.setZoom(19);
google.maps.event.addListener(markerCluster, 'click', function(evt) {
console.log("markerClusterer click:"+evt.markers_.length);
for (var i=0; i<evt.markers_.length; i++) {
console.log(evt.markers_[i].getPosition().toUrlValue(6)+" label="+evt.markers_[i].getLabel());
google.maps.event.trigger(evt.markers_[i],"click");
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#GoogleMap {
height: 70%;
}<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<h1>Hello World</h1>
<div id='GoogleMap'></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=weekly&channel=2"></script>
<script src="https://cdn.jsdelivr.net/gh/fritz-c/OverlappingMarkerSpiderfier@1.1.4/dist/oms.min.js"></script>
<script src='https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js'></script>
</body>
</html>