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.

Answer 2

To build on zolastro answer. You can feed a google.map.Icon object into the iconUrl attribute of agm-marker. But your compiler may complain about it not being assignable to the expected type "string". To bypass that you can simply encapsulate your icon object into $any

.ts

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

.html

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