Need property icon rotation in agm-marker

[gokuldhas]

Issue description
Need property icon rotation in agm-marker could be great.
Is possible to have a class for agm-marker
Example : https://stackoverflow.com/questions/46843606/how-to-make-custom-arrow-mark-in-agm-map

[hamzash750]

yes please anyone have done this because i have same situation need to rotation icon.

[ghost]

currently you can workaround by setting [iconUrl]="{rotation: 40, path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW}"

You are invited to create a PR extending the AgmMarker directive with new properties

[magnusfernandes]

@doom777 it doesn't work for custom marker icons

[ghost]

@magnusfernandes , should work. If anything, the example I gave doesn't work because google namespace isn't available at that time.

Can you make an example on stackblitz?

[magnusfernandes]

@doom777 can this issue be solved soon? Need it for an app release.

[ghost]

can you create a stackblitz?

[magnusfernandes]

@doom777 Stackblitz

[ghost]

worked for me:

[magnusfernandes]

@doom777 can't rotate the custom icon
Stackblitz

[pst9354]

Same problem here...

[magnusfernandes]

@SebastianM @doom777 any update on this, please?

[ghost]

Ok, so I think I got it. MarkerOptions#icon property can either be an Icon or a Symbol. Symbol class has rotation property, while Icon has scaledSize, so you can't have them together. So either convert your icon to an SVG and inline it in Symbol, or actually rotate the image in the icon file manually.

This is a limitation of Google Maps, so we cannot fix it.

Please confirm that this is your problem, and if so, close the issue.

[annnoo]

Is someone working on this issue? Otherwise I could try to implement this (need the functionality aswell 👍 ).

[deeprenus]

stackbiz is not working

[ghost]

Stackblitz stopped working generally.

[stale]

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.

[roushankumar01]

Rotation is working fine but when i am changing rotation value at run time it not working, Example project https://angular-google-maps-demo-b3cm38.stackblitz.io

[ioas99]

You cannot rotate markers using agm-marker and iconUrl property. I recommend using agm-overlay. This way you can set the icon with "img src" and use inline css "style" to rotate the icon. You can check my working example here:
<agm-overlay *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude"> <div> <img *ngIf="marker.type === 'BT'" src='./assets/images/bt.png' style="transform: rotate({{marker.rotation}}deg); width: 60%; height: 60%;"> <img *ngIf="marker.type === 'RTMS'" src='./assets/images/test.png' style="transform: rotate({{marker.rotation}}deg); width: 5%; height: 5%;"> </div> </agm-overlay>

[wlisesrivas]

Any update on this request?

[darron1217]

I created PR to add icon type