More than one marker on same place - MarkerClusterer
Finally got it working. This is for all those who still haven't found a solution. Below code adds offset to the markers on same location:
In your createMarker
function add this code:
//get array of markers currently in cluster
var allMarkers = namespace.mapParams.mapMarkersArray;
//final position for marker, could be updated if another marker already exists in same position
var finalLatLng = latlng;
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
//if a marker already exists in the same position as this marker
if (latlng.equals(pos)) {
//update the position of the coincident marker by applying a small multipler to its 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);
}
}
}
Refer this
Now update your google.maps.Marker
object for each marker with new position value – finalLatLng
.
var marker = new google.maps.Marker({
map: msf_namespace.mapParams.resultmap,
position: finalLatLng,
title: name,
icon: markericon
});
//add each generated marker to mapMarkersArray
namespace.mapParams.mapMarkersArray.push(marker);
MarkerClusterer has option to define maxZoom upto which cluster should be visible in map. You can set its value to 18, so it wont show cluster when user zoomed in to its maximum:
const markerCluster = new MarkerClusterer(map, markers,{maxZoom: 18});
FYI - Precision
decimal places decimal degrees N/S or E/W at equator
2 0.01 1.1132 km
3 0.001 111.32 m
4 0.0001 11.132 m
5 0.00001 1.1132 m