Rotate markers in angular-google-maps

Question

I am trying to make the plot the path as moved by a vehicle. I am using @agm/core angular-google-maps in angular. I am not able to find anything in the documentation that is helpful to rotate the marker.

The iconUrl property do not give enough support. I tried : -

     this.iconUrl = {
        path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145  5,90 95,90 z',
        scale: 6,
        fillColor: "red",
        fillOpacity: 0.8,
        strokeWeight: 2,
        rotation: 150 //this is how to rotate the pointer
    };

The code above does not show any marker on map.

  this.iconUrl = {
        url: 'images/car.svg',
        scale: 6,
        rotation: 150
    };

The code above shows the marker but do not scale or rotate it.

I want to rotate the marker. Is there any possible way to achieve this? Has anyone achieved this using @agm.

Answer 1

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>

Example