javascript - implementing fix for multiple markers on same location Google Maps JS API -

i have site based on open data financial data sets have begun mapping google maps javascript api. don't javascript managed basic maps running of user input (example).

the problem there multiple markers on same postcode 1 marker shown regardless of zoom.

i trying implement 1 of fixes either spiderfy or use js slightly alter lat & lon there more 1 instance in array. latter approach looks easiest me, integrating existing script.

    <script type="text/javascript">        function initmap() {       var map = new google.maps.map(document.getelementbyid('map'), {         zoom: 5,         center: {lat: -19.5541589, lng: 145.7731922}                           });        setmarkers(map);     }      // data markers consisting of name, latlng , zindex     // order in these markers should display on top of each other.     var recipientes = [       ['bondi beach', -33.890542, 151.274856, 4],       ['coogee beach', -33.923036, 151.259052, 5],       ['cronulla beach', -34.028249, 151.157507, 3],       ['manly beach', -33.80010128657071, 151.28747820854187, 2],       ['maroubra beach', -33.950198, 151.259302, 1]      ];      function setmarkers(map) {       // adds markers map.        // marker sizes expressed size of x,y origin of image       // (0,0) located in top left of image.        // origins, anchor positions , coordinates of marker increase in x       // direction right , in y direction down.       var image = {         url: 'https://openaus.net.au/scripts/images/flag1-orange-icon.png',         // marker 20 pixels wide 32 pixels high.         size: new google.maps.size(20, 22),         // origin image (0, 0).         origin: new google.maps.point(0, 0),         // anchor image base of flagpole @ (0, 32).         anchor: new google.maps.point(0, 22)                   };       // shapes define clickable region of icon. type defines html       // <area> element 'poly' traces out polygon series of x,y points.       // final coordinate closes poly connecting first coordinate.       var shape = {         coords: [1, 1, 1, 40, 36, 40, 36, 1],         type: 'poly'                   };       (var = 0; < recipientes.length; i++) {         var recipient = recipientes[i];         var marker = new google.maps.marker({           position: {lat: recipient[1], lng: recipient[2]},           map: map,           icon: image,           shape: shape,           title: recipient[0],           zindex: recipient[3]                        });       }      }         </script>         <script async defer           src="api key">         </script>  

i don't know how change solution work existing code:

    <script type="text/javascript">        function initmap() {       var map = new google.maps.map(document.getelementbyid('map'), {         zoom: 5,         center: {lat: -19.5541589, lng: 145.7731922}                           });        setmarkers(map);     }      // data markers consisting of name, latlng , zindex     // order in these markers should display on top of each other.     var recipientes = [      ['bondi beach', -33.890542, 151.274856, 4],       ['coogee beach', -33.923036, 151.259052, 5],       ['cronulla beach', -34.028249, 151.157507, 3],       ['manly beach', -33.80010128657071, 151.28747820854187, 2],       ['maroubra beach', -33.950198, 151.259302, 1]      ];      function setmarkers(map) {       // adds markers map.        // marker sizes expressed size of x,y origin of image       // (0,0) located in top left of image.        // origins, anchor positions , coordinates of marker increase in x       // direction right , in y direction down.       var image = {         url: 'https://openaus.net.au/scripts/images/flag1-orange-icon.png',         // marker 20 pixels wide 32 pixels high.         size: new google.maps.size(20, 22),         // origin image (0, 0).         origin: new google.maps.point(0, 0),         // anchor image base of flagpole @ (0, 32).         anchor: new google.maps.point(0, 22)                   };       // shapes define clickable region of icon. type defines html       // <area> element 'poly' traces out polygon series of x,y points.       // final coordinate closes poly connecting first coordinate.       var shape = {         coords: [1, 1, 1, 40, 36, 40, 36, 1],         type: 'poly'                   };       (var = 0; < recipientes.length; i++) {         var recipient = recipientes[i];         var marker = new google.maps.marker({           position: {lat: recipient[1], lng: recipient[2]},           map: map,           icon: image,           shape: shape,           title: recipient[0],           zindex: recipient[3]                        });       }      }      //get array of markers in cluster     var allmarkers = namespace.mapparams.mapmarkersarray;      //final position marker, updated if marker exists in same position     var finallatlng = latlng;      //check see if of existing markers match latlng of new marker     if (allmarkers.length != 0) {         (i=0; < allmarkers.length; i++) {             var existingmarker = allmarkers[i];             var pos = existingmarker.getposition();              //if marker exists in same position marker             if (latlng.equals(pos)) {                 //update position of coincident marker applying small multipler coordinates                 var newlat = latlng.lat() + (math.random() -.5) / 1500;// * (math.random() * (max - min) + min);                 var newlng = latlng.lng() + (math.random() -.5) / 1500;// * (math.random() * (max - min) + min);                 finallatlng = new google.maps.latlng(newlat,newlng);             }         }     }              var marker = new google.maps.marker({         map: msf_namespace.mapparams.resultmap,         position: finallatlng,         title: name,         icon: markericon     });     //add each generated marker mapmarkersarray     namespace.mapparams.mapmarkersarray.push(marker);         </script>         <script async defer           src="api key">         </script>  

if me figure out i'd appreciate it.