Integration with Spiderfy doesn't work for custom-marker
https://github.com/jawj/OverlappingMarkerSpiderfier Spiderfy requires me to tell it anytime I add a marker into the app.
I tried the following but it doesn't seem to listen:
$cope.stops = []; // some array of objects
NgMap.getMap({
id: 'map'
}).then(function(map) {
$scope.map = map;
$scope.markers = map.customMarkers;
$scope.oms = new OverlappingMarkerSpiderfier(map);
var infoWindow = $scope.map.infoWindows.infoWindow;
$scope.oms.addListener('click', function(marker, event) {
console.log("YES?");
infoWindow.setContent("OMG");
infoWindow.open(map, marker);
});
});
$scope.$watch('markers', function(old,newMarkers) {
for (var k in newMarkers) {
var marker = newMarkers[k];
$scope.oms.addMarker(marker);
}
});
Pretend I'm loading into this directive
<custom-marker ng-repeat="stop in stops track by stop.id"
position="{{::stop.latitude}}, {{::stop.longitude}}">
</custom-marker>
Update: I was able to watch the markers, but now Spiderfy doesn't seem to be working, it is passing addMarker to $scope.oms however, clicking on the map doesn't do anything, like the event is not really set.
It works with regular marker directive!!!!! Looks like custom-marker doesn't seem to separate.
I see custom-marker is actually an overlay, not a marker https://github.com/allenhwkim/angularjs-google-maps/issues/531
Is it possible to pass class and style. I am trying to put a "label" onto the marker with a number. If I can pass style="content:'{{myvar}}'" to the marker, I can insert it with css using .marker::after { content: inherit; }
I don't know what Spiderfy is.
I have to say "nice finding about css". All I know custom-marker already has css and it's also dependent on css to show pointer to the position
https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/custom-marker.css
You can modify css easily. You can play around here http://plnkr.co/edit/tJ9kBX?p=preview