angulartypescriptgoogle-maps-api-3markerclustererangular12

How to bind Circles to Markers so it will get managed by the Marker-Clusterer ? Angular GoogleMaps Component


What I am actually trying to achieve is to display a MapCircle for each Marker that is not inside a cluster and hide it when it is in one.

I am aware that I can style the pin into a circle shape) but I need a precise radius displayed and this way I might avoid multiple calculations for the shape size.

Clustered Img Declustered Img

Thank you in advance!


Solution

  • I managed to partially solve this and I don't need to listen to any event triggered by the "map-marker-clusterer".

    The markers are managed by Clusters through the "map" property of the Marker (if it has a map it shows the marker). Therefore I have found the issue why a pin was also added on the map along with the cluster size ... when I was creating a Marker, I was specifying the "map" for the Marker.

    Now regarding circles around the marker, for each marker you can create a Circle and bind the position of the marker to circle center.

     <google-map width="100%" height="100%">
            <map-marker-clusterer [averageCenter]="true" #clusterer>
              <map-marker *ngFor="let marker of markers" [visible]="false" [position]="marker.getPosition()"></map-marker>
            </map-marker-clusterer>
            <map-circle *ngFor="let circle of circles" [center]="circle.getCenter()" [radius]="100"></map-circle>
          </google-map>
    

    But I still can't figure out how to bind the circle map to the marker map property to be managed as well by the cluster (to be hidden when the cluster is created) The circle doesn't have a "map" property but the CircleOptions has one. (import CircleOptions = google.maps.CircleOptions)

           const marker = new Marker({
            position: new MapCoordinates(address.lat, address.lng) 
           });
    
          const circle = new Circle();
          circle.bindTo('center', marker, 'position'); //Works like a charm
    
    
          circle.bindTo('map', marker, 'map'); // Doesn't work
    

    Update:

    1. I have tried even extending the Circle class and define getters and setters for a so called map property in which I am trying to setOptions with a map value. The code is not getting triggered.

    2. I have tried adding a listener for the "map_changed" event on the marker, but it doesn't hit my debugger, I was hopping that in the callback to be able to somehow change the visibility of the Circle