Arrow Symbols (Polyline) for AGM(Angular Google Map)

Question

In angular 6. I am using flowing code for agm-polyline. I want to add Arrow Symbols (Polyline) (https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow) in agm-polyline. But compiler shows error like Can't bind to 'icon' since it isn't a known property of 'agm-polyline'....

<agm-polyline [strokeColor]="color" [icon]="icon"  >
          <agm-polyline-point  *ngFor="let marker of markers ; let i=index"  [latitude]="marker.lat" [longitude]="marker.lng">
          </agm-polyline-point>
    
        </agm-polyline>

For agm-polyline Arrow Symbols (Polyline) what should I do?

Did you got any solution on this.. ? – janaka aravinda Apr 02 '19 at 11:12 — janaka aravinda, Apr 02 '19 at 11:12
@janakaaravinda Not yet. – Md. Nashir Uddin Apr 02 '19 at 12:20 — Md. Nashir Uddin, Apr 02 '19 at 12:20

score 2 · Answer 1 · answered Sep 07 '20 at 07:09

<agm-polyline [strokeColor]="'red'" [strokeWeight]="'1.5'">
                                        <agm-icon-sequence [fixedRotation]="false"
                                            [repeat]= "'50px'"
                                            [offset]="100" 
                                            [path]="'FORWARD_OPEN_ARROW'">
                                        </agm-icon-sequence>
                                        <agm-polyline-point *ngFor="let line of circles_path" 
                                        [latitude]="line.lat"
                                        [longitude]="line.long" >
                                        </agm-polyline-point>
                                    </agm-polyline>

If I want to show dotted line then what should be in "path" input @Rambabu Padimi — Reaper, Aug 04 '22 at 09:13

score 0 · Answer 2 · answered Dec 24 '19 at 06:13

0

agm uses [iconUrl] instead of [icon].Try that and set the Url in the .ts file like this:


  public icon = {
    url: 'http://earth.google.com/images/kml-icons/track-directional/track-4.png',
    scaledSize: {
      width: 30,
      height: 30
    }
}

answered Dec 24 '19 at 06:13

Ujjwal Sharma

96
2
11

Arrow Symbols (Polyline) for AGM(Angular Google Map)

2 Answers2