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..
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
}
}