How to solve Google Map markers with same latitude and longitude?

Question

Currently I am creating a Google Map View for my listing website with multiple markers added which all latitudes and longitudes are retrieved from database. Now I met a problem, which is having same latitude and longitude markers. I searched through the net and found a solution which is to use Marker Cluster but i have no idea with that, please help.

This is my code for getting the current location, marked with different icon and also adding multiple markers which the lat and lon are retrieved from the database:

lat = position.coords.latitude;
lon = position.coords.longitude;


latlon = new google.maps.LatLng(lat, lon);
mapholder = document.getElementById('mapholder');
mapholder.style.height = '500px';
mapholder.style.width = '1300px';

var myOptions = {
    center:latlon,zoom:13,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}

var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);

var infowindowforCurrentLoc = new google.maps.InfoWindow();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: latlon,
    icon: image,
    map: map,
});  
marker.addListener('click', toggleBounce);

function toggleBounce() {
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
    } else {
      infowindowforCurrentLoc.setContent('<h2>You are Here!</h2>');
      infowindowforCurrentLoc.open(map, marker);
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}

var markerr = new google.maps.Marker();
<?php
$filtering = $_GET["filtering"];

if($filtering=="condo"||$filtering=="commercial"){
    $sql = "SELECT * FROM propertylisting WHERE propertytype='$filtering'";
}
else{
    $sql = "SELECT * FROM propertylisting WHERE listingtype='$filtering'";
}

$result=mysql_query($sql);
$totallist = mysql_num_rows($result);
$tmpcount=0;
echo"var infowindow = new google.maps.InfoWindow(), markerr, i;
     var markers=new Array(3);";
while($rows=mysql_fetch_array($result)){
    echo"markers[".$tmpcount."]=new Array(3);
         markers[".$tmpcount."][0]='".$rows['listingtopic']."';
         markers[".$tmpcount."][1]= ".$rows['listinglatitude'].";
         markers[".$tmpcount."][2]= ".$rows['listinglongitude'].";
        ";
    $tmpcount=$tmpcount+1;
}
?>

for (i = 0; i < markers.length; i++) {  
    markerr = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map
    });
    google.maps.event.addListener(markerr, 'click', (function(markerr, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, markerr);
        }
    })(markerr, i));
}

Answer 1

I think that you can use the marker cluster ( https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js ) for that. Modify your script, which creates the markers like this:

var markers = [];
for (i = 0; i < markers.length; i++) {
   var markerr = new google.maps.Marker({
      position: new google.maps.LatLng(markers[i][1], markers[i][2]),
      map: map
   });
   markers.push(markerr);
}
var markerCluster = new MarkerClusterer(map, markers);