How to make custom arrow mark in agm-map?

Question

I am building a vehicle tracking application and i am using agm-map-marker to display the vehicles that were located like this in the image,

And Livetracking.component.html code is,

<agm-map #gm [latitude]="lat" [longitude]="lng" [(zoom)]="zoom" [mapTypeControl]="true">
            <agm-marker class="mapMarker" *ngFor="let device of devices;"
                [latitude]="device.latitude" [longitude]="device.longitude"
                (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow;mapMarkerInfo(m);">
            </agm-marker>
</agm-map>

Here i need to replace the marker into arrows, exactly as like in this image,

I am in the need of changing the marker to arrow as like in the second image..Kindly help me to achieve the desired result..

Answer 1

The accepted answer will not work because those aren't properties of the agm-marker.

Inside iconUrl property you can use any of these types:

string

Icon: https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#Icon

Symbol: https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker#Symbol

For example, to use a custom image marker (SVG in this case) with desired size you can use this object in the [iconUrl] property:

{
    url: './assets/images/blue-marker.svg',
    scaledSize: {
        width: 40,
        height: 60
    }
}