I am having an issue when I show a map in my webpage and I have some icons inside it. The issue is with the area of the icon when the click triggers an action. Because it has a big square arround each icon:
As you can see on the screenshot, all the blue square around my icon has the same behavior as if I click inside it. I would like to fit to the form of the icon the action radious to avoid, as you can see in the screeshot, clicking elements (as the one on the left where I am pointing in the image) and performing the action to other elements near them.
I have the icon in PNG but it is fit when I see it on the windows images. I have them too in .svg but it has the same results in the AGM MAP:
The code for my map is:
<agm-map
[scrollwheel]="null"
(idle)="updateMapCenter()"
(mapReady)="getMapInstance($event)"
[latitude]="latCentroMobile"
[longitude]="lonCentroMobile"
[zoom]="zoomMobile"
(boundsChange)="checkMarkersInBounds($event)"
>
<agm-marker-cluster
[imagePath]="'https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/images/m1.png?raw=true'"
[styles]="mapOptions.styles"
[calculator]="mapOptions.calculator"
style="background-repeat: no-repeat"
[maxZoom]="15"
[minimumClusterSize]="2"
>
<agm-marker
*ngFor="let m of mupisFiltered; let i = index"
[markerClickable]="!isDisabled(m)"
(markerClick)="selectMupi1(m.index)"
[latitude]="m.lat"
[longitude]="m.lon"
[iconUrl]="{
url: '../../../assets/img/icons/soportes/svg/10.svg',
scaledSize: { height: 35, width: 35 }
}"
></agm-marker>
</agm-marker-cluster>
</agm-map>
I don't modify nothing in my TS file related to the map.
Can someone help me with that?
Best regards