How to replace google map marker icon with custom icon in @angular/google-maps module

Question

component.html:

  <google-map (mapClick)="click($event)" 
  [center]="center" [options]="options" height="500px" width="100%"
    [zoom]="zoom">

    <map-marker (mapClick)="openInfoWindow(marker)" [clickable]="true"
  
    *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label"
      [title]="marker.title" [options]="marker.options">
    </map-marker>
    <map-info-window>Info Window content</map-info-window>
  </google-map>

component.ts:

options: google.maps.MapOptions = {
    zoomControl: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 15,
    minZoom: 8,
  }

I've tried adding icon property with url value in options, passing input in map-marker but none worked

https://github.com/angular/components/tree/master/src/google-maps#readme

Answer 1

As for Angular Google Maps Marker (https://github.com/angular/components/tree/master/src/google-maps/map-marker) documentation, options includes all map-marker object properties that are not "convenience inputs":

...this component offers an options input as well as convenience inputs for position, title, label, and clickable, and supports all google.maps.Marker events as outputs.

so any other property that's not a "convenience input" has to be passed inside a JSON object like so to each marker object on your array:

      const markers =[
      {...},
      {...},
      [{
        position:{
           lat: 24.1  + ((Math.random() - 0.5) * 2) / 100,
           lng: 0.2 + ((Math.random() - 0.5) * 2) / 100,
        },
        visible: true,
        opacity: 0.6,
        label: {
           color: '#333',
           text: 'My Label',
        },
        title: 'My Title',
           options = {
           draggable: false, 
           icon: '../assets/icons/MyMarker.png'
        }
      }],
      {...},
      {...}
    ];

or, at least, it's what has to be inferred until documentation is completed.

Just past this code on your component and fill the ellipsis objects with needed data or just create an array with this structure from your own data.

Answer 2

A little digging into the node-modules of @angular/google-maps I found out the icons should be set in the options of map marker.

 <map-marker (mapClick)="openInfoWindow(marker)" [clickable]="true"
  
    *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label"
      [title]="marker.title" [options]="marker.options">
    </map-marker>

for example the marker property should look like

     const markers = [{

        position:{
        lat: 27  + ((Math.random() - 0.5) * 2) / 10,
        lng: 80 + ((Math.random() - 0.5) * 2) / 10,
      },
        visible: false,
        opacity: 0.1,
        label: {
          color: 'black',
          text: 'Marker label ',
        },
        title: 'Marker title ',
        options: {
          animation: google.maps.Animation.DROP,
          icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
        }
      }]