I need a way to customize the map marker in Angular 2 with agm map. In a vehicle tracking application I have to display the vehicle status at present via agm-marker in live tracking component. I need to display the marker in three different colors (say green for running red for stopped and yellow for idle) and also I need to show the way of direction the vehicle travelling at present.
I searched many places, but found only icons which can be added to the marker and I added icon using iconUrl
like,
<agm-map>
<agm-marker class="mapMarker" *ngFor="let device of devices;" [latitude]="device.latitude" [longitude]="device.longitude" [iconUrl]="'/src/assets/arrow2.png'" [label]="device.name">
</agm-marker>
</agm-map>
And my output is like,
As this looks more awkward, kindly help me to display HTML, in place of that icon on the marker.
I am in the need of output exactly like in the below image(Marker along with html label showing that particular vehicle number).