Manage the size of icon using agm-marker

Question

I am trying to apply the css for height and width to icon.

The code which I used for icon with agm-marker is below:-

<agm-marker *ngFor="let m of mapData; let i = index"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="labelOptions"
    [iconUrl]="iconUrl">
</agm-marker>

.ts

public iconUrl = 'http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/08/ddrive.png';

Please let me know how can I manipulate the size of this icon. This is custom icon which I added

Answer 1

You can pass an Icon object as parameter to IconURL. Icon has an scaledSize parameter that you can modify. This could be an example:

    icon = {
              url: 'http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/08/ddrive.png',
              scaledSize: {
                width: desiredWidthScale,
                height: desiredHeightScale
              }
}

So you can just use:

<agm-marker *ngFor="let m of mapData; let i = index"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="labelOptions"
    [iconUrl]="icon">
</agm-marker>

Take into account that you are modifying the scale of the image and not the actual size.