javascript - GeoJSON, Overlapping Pointers, OverlappingMarkerSpiderfier -

i'm new google maps api. in geojson file have list of geo locations (cordinates lat-lon).

with:

map.data.loadgeojson('json/geojson.json'); 

i'm putting data on map point-s. have problem points have same cordinates.

i found https://github.com/jawj/overlappingmarkerspiderfier

but works markers cant work.

suggestions? can overlappingmarkerspiderfier?

my code:

function initialize() {      var map = new google.maps.map(document.getelementbyid('map-canvas'), {         zoom: 13,         center: {lat: 45.8167, lng: 15.9833}     });      map.data.loadgeojson('json/geojson.json');      //////////////////////////     //code grouping pointers/markers     //////////////////////////      map.data.setstyle(function (feature) {         return {             icon: '/inc/mapper/img/' + feature.getproperty('icon_url') + '.png',         };     });  } google.maps.event.adddomlistener(window, 'load', initialize); 

process geojson, create own markers, add them overlappingmarkerspiderfier.

examples below use markerclustererplus , overlappingmarkerspiderfier, data geojson local page.

working jsfiddle (duplicate marker position @ bielefeld in center)

working code snippet:

var map = null;  var bounds = new google.maps.latlngbounds();    var boxtext = document.createelement("div");  boxtext.style.csstext = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";  var infobox = new infobox({    content: boxtext,    disableautopan: false,    maxwidth: 0,    pixeloffset: new google.maps.size(-140, 0),    zindex: null,    boxstyle: {      background: "url('tipbox.gif') no-repeat",      opacity: 0.75,      width: "280px"    },    closeboxmargin: "10px 2px 2px 2px",    closeboxurl: "http://www.google.com/intl/en_us/mapfiles/close.gif",    infoboxclearance: new google.maps.size(1, 1),    ishidden: false,    pane: "floatpane",    enableeventpropagation: false  });    var markerclusterer = new markerclusterer(null, null, {    imagepath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"  });  minclusterzoom = 14;  markerclusterer.setmaxzoom(minclusterzoom);    function initialize() {    var mapoptions = {      center: new google.maps.latlng(52, 8),      zoom: 4    };    map = new google.maps.map(document.getelementbyid('map'), mapoptions);      var oms = new overlappingmarkerspiderfier(map, {      markerswontmove: true,      markerswonthide: true,      keepspiderfied: true    });      markerclusterer.setmap(map);    google.maps.event.addlistener(map.data, 'addfeature', function(e) {      if (e.feature.getgeometry().gettype() === 'point') {        var marker = new google.maps.marker({          position: e.feature.getgeometry().get(),          title: e.feature.getproperty('name'),          map: map        });        google.maps.event.addlistener(marker, 'click', function(marker, e) {          return function() {              var myhtml = e.feature.getproperty('name');            boxtext.innerhtml = "<div style='text-align: center;'><b>" + myhtml + "</b></div>";            infobox.setposition(e.feature.getgeometry().get());            infobox.setoptions({              pixeloffset: new google.maps.size(0, 0)            });            infobox.open(map);          };        }(marker, e));        markerclusterer.addmarker(marker);        oms.addmarker(marker);          bounds.extend(e.feature.getgeometry().get());        map.fitbounds(bounds);        map.setcenter(e.feature.getgeometry().get());      }    });    layer = map.data.addgeojson(geojson);    map.data.setmap(null);    google.maps.event.addlistener(map, "click", function() {      infobox.close();    });  }  google.maps.event.adddomlistener(window, 'load', initialize);    var geojson = {    "type": "featurecollection",    "features": [{      "type": "feature",      "properties": {        "name": "bielefeld"      },      "geometry": {        "type": "point",        "coordinates": [8.528849, 52.030656]      }    }, {      "type": "feature",      "properties": {        "name": "bielefeld2"      },      "geometry": {        "type": "point",        "coordinates": [8.528849, 52.030656]      }    }, {      "type": "feature",      "properties": {        "name": "herford"      },      "geometry": {        "type": "point",        "coordinates": [8.676780, 52.118003]      }    }, {      "type": "feature",      "properties": {        "name": "guetersloh"      },      "geometry": {        "type": "point",        "coordinates": [8.383353, 51.902917]      }    }, {      "type": "feature",      "properties": {        "name": "guetersloh2"      },      "geometry": {        "type": "point",        "coordinates": [8.38, 51.9]      }    }]  };

#map {    width: 500px;    height: 500px;  }

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>  <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>  <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>  <script src="http://jawj.github.io/overlappingmarkerspiderfier/bin/oms.min.js"></script>  <div id="map"></div>