Search code examples
angulargoogle-mapsangular-google-maps

AGM MAP | Adding marker just in drawn Polygon


Issue description
I use AGM_MAP library for angular website that contains a map to able users select an address on the map for getting theirs orders.

Current behavior
My problem is when i add a polygon on the map, the marker can't be on that area which shows with polygon. But i can add the marker outside the polygon.

Expected/desired behavior
In the end i need add a marker just on that area which shows with polygon.

Html codes:

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="14" (mapClick)="addMarker($event)">
  <agm-polygon [paths]="latlngBounds">
  </agm-polygon>
  <agm-marker *ngIf="isShowMarker" [latitude]="lat" [longitude]="lng" [label]="'M'">
  </agm-marker>
</agm-map>

screenshot from 2018-02-26 12-47-40


Solution

  • I noticed for adding markers on the polygon shapes we must set clickable attribute to false like below:

    <agm-polygon [paths]="paths" [clickable]="false">
    </agm-polygon>
    

    Stackblitz sample