Angular-google-maps: How do I resize an icon ?

I'm trying to do the same thing, but looking at the sources, there's no way of doing it, the only way you can assign an icon is through an url, you cannot use the google.maps.Icon object. I was thinking of modifying the code and creating a pull request for it.

@SebastianM I wrote some code to handle google.maps.Symbol and google.maps.Icon for the icon property of the marker, I will push to my fork tomorrow so you can take a look at it

I agree we should support both string and Icon objects and rename the property to icon
icon?: string|Icon;

I broke 4 unit tests, but I have the icon update in my fork. I also added to the google-maps-types.ts file.

@cdarken I just saw your PR and will hold off on my Pr, its basically the same. I have some suggestions about the property names. I think we should match the naming that google uses.

@rc3media I tried to keep it backward compatible, that's why I've added the 'icon' accessor on the marker

When will this feature be add ? this issue is from aug X_X

I am able to use the Icon object against the iconUrl property of the marker.

My icon looks like:

{
      url: require('../images/vehicle-active.png'), // gives a data://<value>
      scaledSize: {
        height: 40,
        width: 40
      }
}

And then I bind this to [iconUrl]. The 'iconUrl' variable may be named poorly, but if you look at source, it just gets passed to the 'icon' property for gmaps.

@bradseefeld where do you place the code that defines the icon : in your typescript component ? I got a error Cannot find name 'require'.

We're using webpack to process and package up our app. It handles the require calls. I dont think this solution will work unless you're using webpack or something similar.

Yes I use webpack. It works, but I had to add :
declare function require(path: string);

Require is not necessary (at least with Ionic)

{
      url: 'assets/img/marker-me.png',
      scaledSize: {
        height: 40,
        width: 40
      }
}

@sebrojas14 this is not working anymore in latest 1.0.0.x versions.
Now is really require "String", if not provided it throw error.

Do you have some ideas when this much requested feature will be available ?

Thanks

@pdanysz works fine for me, version 1.0.0-beta.3

@grreeenn I have already installed that version and it throws me an error, thats way I asking :)

Can you share you code, ...maybe I'm doing something wrong :)

Thanks

@pdanysz We've lost our magic wands and we cannot see your error from here. It would really help if you could share the error so we know what you're actually dealing with. Also we'll need your code in order to know how to fix the error. In other words, in order to help you, we need a full reproduction so we can inspect the problem. Could you give us that?

I tried using this object:

icon = {
        url: '/assets/images/img.png', 
        scaledSize: {
          height: 40,
          width: 20
        }
      };

and that works for me.
Though, the marker is supposed to be used for multiple establishments on my map, and I can't use a single property on my ts class to make this work as intended. So, instead of using [iconUrl]="icon" on my html, I'm trying to use [iconUrl]="getIcon(establishment)", which would return the above described object with different urls for each establishment. This makes the app freeze when trying to load the agm-map. Is the stuff I wrote here enough to tell if this is possible? I can send more details if needed.
Thanks!

Found this comment by hrdkisback on StackOverflow which lets you dynamically change the map marker icon and specify the size:

[iconUrl]='{"url": marker,"scaledSize": {"height": 10, "width": 10}}'

https://stackoverflow.com/questions/50812678/add-user-image-to-agm-marker-in-angular-5#comment88677807_50812678

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.