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

Chaussure

Answer 1

You can use the existing api and set the iconUrl

<agm-marker
   [latitude]="location.latitude"
   [longitude]="location.longitude"
   [iconAnchorX]="10"
   [iconAnchorY]="10"
   [iconHeight]="20"
   [iconWidth]="20">
   [iconUrl]="location.icon">
 </agm-marker>

Leong

i am getting error Can't bind to 'iconAnchorX' since it isn't a known property of 'agm-marker'. when i added above code – Gawain

My Wrking Code ===> <agm-marker id="fine" *ngFor="let m of tunnelDetails; let i = index" [iconUrl]="icon" (markerClick)="markerHighlight(m)" [latitude]="(m.originLat)*1" [longitude]="(m.originLon)*1" [markerDraggable]="m.draggable" (dragEnd)="markerDragEnd(m, $event)" [label]="{ color: '#fff', fontFamily:'Arial', text:m.tunnelName, labelClass:'className' }"> – Beeline

I am getting same error like Can't bind to 'iconAnchorX' since it isn't a known property of 'agm-marker'. – Hourglass

Answer 2

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

Behah

Can u help me with this question? #52818341 – Lance

Answer 3

You have to include agm-overlays in project then you can draw overly and it also provide support to add custom div on map.

<agm-overlay
          *ngFor="let driver of driversList"
          [latitude]="driver.latitude"
          [longitude]="driver.longitude"
        >
          <div>
            <img
              style="cursor: pointer;"
              [ngClass]="{
                online: driver.status === 'online',
                offline: driver.status === 'offline'
              }"
              src="{{
               driver.profileImageURL
              }}"
            />

          </div>
        </agm-overlay>

Add this in css file

.online { border: 3px solid black }

Woodson

Answer 4

• You just have to add iconUrl object in html file.

  <agm-marker
              [latitude]="latitude"
              [longitude]="longitude"
              [markerDraggable]="true"
              (dragEnd)="markerDragEnd($event)"
              [iconUrl]="iconUrl" >
  </agm-marker>
  

• In ts file you have to add this:

   public iconUrl = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
  

Barnie