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

Decare

please add the html of this agm-marker component – Fictitious

The code which I gave is html n ts file – Decare

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.

Ecto

This worked perfect! Too bad the docs do not mention this :( angular-maps.com/api-docs/agm-core/directives/AgmMarker.html – Adonis

I can't make it to work. The documentations says iconUrl must be of type string. when i change it to the icon obj, the app freezes and nothing is displayed on the console. – Neutralize

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>

Riley

thanks man. this is the only solution worked for me. tried parsing the object to string but no good. cheers! – Ashti

Answer 3

Try this

  icon = { url: '../../assets/images/yyy.svg', scaledSize: {height: 40, width: 40}}

Krasner

You are missing closing curly braces there. And probably a bit of information... – Leopoldine

Answer 4

Manually resize the image/icon size in paint and keep it for 30 or 40 pixel. This will solve the problem.

Thenceforward

So if I ask you "How can I programmatically resize an image" your answer will be "resize it in Photoshop and your problem will be gone", right? That's just as bad as an answer can get. – Leopoldine

Thats is a not a "Programmatically solution" – Frore