multiple markers on same location google maps, so OverlappingMarker - angularjs

Question

{literal}
<script type="text/javascript">
function TypeaheadCtrl($scope, $http, $compile) {
var firstLoad = true;
var markerClusterer = null;
var oms = null;
$scope.myMarkers = [];
$scope.infoWindow = new google.maps.InfoWindow();
$scope.mapOptions = {
center: new google.maps.LatLng(41.222298, -73.439740),
zoom: 8,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.getDynamicMin = function(){ $scope.dynamic_min; }
$scope.getDynamicMax = function(){ $scope.dynamic_min; }
$scope.dynamic_value = ($scope.dynamic_max - $scope.dynamic_min)/2;
$scope.SliderCtrlFn = function(vrange) {
$scope.min = (vrange >= 1 && vrange <=3) ? 1 : (vrange >=4 && vrange <=15) ? 18 : (vrange >= 16 && vrange <=25) ? 25 : (vrange >= 26 && vrange <=36) ? 36 : (vrange >= 37 && vrange <=51) ? 45 : 60;
$scope.max = (vrange >= 1 && vrange <=3) ? 130 : (vrange >=4 && vrange <=15) ? 24 : (vrange >= 16 && vrange <=25) ? 35 : (vrange >= 26 && vrange <=36) ? 44 :(vrange >= 37 && vrange <=51) ? 59: 130;
$scope.getcontacts('Age');
}
$scope.Gender_selectAction = function () {
$scope.getcontacts('Gender');
}
$scope.genders = [{value: '1',name: 'Female'}, {value: '2',name: 'Male'}];
$scope.getcontacts = function (fieldname) {
CDname = $scope.cong_dist;
SDname = $scope.senate_dist;
Assembly = $scope.assembly_dist;
Pname = $scope.precinct_name;
Citycode = $scope.city_code;
Gender = $scope.Gender;
Minage = $scope.min;
Maxage = $scope.max;
var dataUrl = {/literal}"{crmURL p='civicrm/contact/mapcontacts/filter/getcontacts' }"{literal};
return $http.get(dataUrl, {
params: {
fieldName:fieldname,
CDname:CDname,
SDname:SDname,
Assembly:Assembly,
Pname:Pname,
Citycode:Citycode,
Gender:Gender,
Minage:Minage,
Maxage:Maxage,
sensor: false
}
}).then(function(res){
$scope.myMarkers = [];
if(res.data && res.data != "null" && res.data != ""){
var infoWindow=$scope.infoWindow;
angular.forEach(res.data, function(item){
marker = $scope.createmarker(item,infoWindow);
var oms = new OverlappingMarkerSpiderfier($scope.nggMap);
$scope.myMarkers.push(marker);
});
$scope.infoWindow.close();
var markerCluster = new MarkerClusterer($scope.nggMap, $scope.myMarkers);
}
return $scope;
});
}
$scope.createmarker = function(item,infoWindow){
var point = new google.maps.LatLng(item.geo_code_1,item.geo_code_2);
var marker = new google.maps.Marker({
map: $scope.nggMap,
position: point,
contactid: item.contact_id,
title: item.display_name ,
zIndex: google.maps.Marker.MAX_ZINDEX + 5
}); //,animation: google.maps.Animation.DROP
marker.content = '<div class="infoWindowContent">' + item.display_name + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.content + '</h2>');
infoWindow.open($scope.nggMap, marker);
});
oms.addMarker(marker);
return marker;
}
ms.addListener('click', function(marker, event) {
$scope.infoWindow.open($scope.nggMap, marker);
});
}
</script>
{/literal}
so i want to use OverlappingMarkerSpiderfier anybody can plz help me how to use it??
i have already used library in my html.
and put OverlappingMarkerSpiderfier code i am getting error so plz can anybody help me to solve this issue.

Answer 1

Try to Use Like
for (var i = 0; i < window.mapData.length; i ++) {
var datum = window.mapData[i];
var loc = new gm.LatLng(datum.lat, datum.lon);
var marker = new gm.Marker({
position: loc,
title: datum.h,
map: map
});
marker.desc = datum.d;
oms.addMarker(marker); // <-- here
}
You will find the details doc. and code regarding this refer this link