feat(google-maps): add icon input to marker (#22357)

Currently the only way to control the icon of a marker is through the `options` object which can be cumbersome. These changes add a dedicated `icon` input which can be used to only change the icon.

Fixes #22097.

Author: crisbeto

src/google-maps/map-marker/map-marker.spec.ts

@@ -45,6 +45,7 @@ describe('MapMarker', () => {
       title: undefined,
       label: undefined,
       clickable: undefined,
+      icon: undefined,
       map: mapSpy,
     });
   });
@@ -55,6 +56,7 @@ describe('MapMarker', () => {
       title: 'marker title',
       label: 'marker label',
       clickable: false,
+      icon: 'icon.png',
       map: mapSpy,
     };
     const markerSpy = createMarkerSpy(options);
@@ -65,6 +67,7 @@ describe('MapMarker', () => {
     fixture.componentInstance.title = options.title;
     fixture.componentInstance.label = options.label;
     fixture.componentInstance.clickable = options.clickable;
+    fixture.componentInstance.icon = 'icon.png';
     fixture.detectChanges();
 
     expect(markerConstructorSpy).toHaveBeenCalledWith(options);
@@ -221,6 +224,7 @@ describe('MapMarker', () => {
                            [label]="label"
                            [clickable]="clickable"
                            [options]="options"
+                           [icon]="icon"
                            (mapClick)="handleClick()"
                            (positionChanged)="handlePositionChanged()">
                </map-marker>
@@ -233,6 +237,7 @@ class TestApp {
   label?: string|google.maps.MarkerLabel;
   clickable?: boolean;
   options?: google.maps.MarkerOptions;
+  icon?: string;
 
   handleClick() {}
 

src/google-maps/map-marker/map-marker.ts

@@ -95,6 +95,16 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
   }
   private _options: google.maps.MarkerOptions;
 
+  /**
+   * Icon to be used for the marker.
+   * See: https://developers.google.com/maps/documentation/javascript/reference/marker#Icon
+   */
+  @Input()
+  set icon(icon: string | google.maps.Icon | google.maps.Symbol) {
+    this._icon = icon;
+  }
+  private _icon: string | google.maps.Icon | google.maps.Symbol;
+
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.animation_changed
@@ -276,7 +286,7 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const {marker, _title, _position, _label, _clickable} = this;
+    const {marker, _title, _position, _label, _clickable, _icon} = this;
 
     if (marker) {
       if (changes['options']) {
@@ -298,6 +308,10 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
       if (changes['clickable'] && _clickable !== undefined) {
         marker.setClickable(_clickable);
       }
+
+      if (changes['icon'] && _icon) {
+        marker.setIcon(_icon);
+      }
     }
   }
 
@@ -430,8 +444,9 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
       title: this._title || options.title,
       position: this._position || options.position,
       label: this._label || options.label,
-      clickable: this._clickable !== undefined ? this._clickable : options.clickable,
+      clickable: this._clickable ?? options.clickable,
       map: this._googleMap.googleMap,
+      icon: this._icon || options.icon
     };
   }
 

tools/public_api_guard/google-maps/google-maps.d.ts

@@ -234,6 +234,7 @@ export declare class MapMarker implements OnInit, OnChanges, OnDestroy, MapAncho
     cursorChanged: Observable<void>;
     draggableChanged: Observable<void>;
     flatChanged: Observable<void>;
+    set icon(icon: string | google.maps.Icon | google.maps.Symbol);
     iconChanged: Observable<void>;
     set label(label: string | google.maps.MarkerLabel);
     mapClick: Observable<google.maps.MapMouseEvent>;
@@ -272,7 +273,7 @@ export declare class MapMarker implements OnInit, OnChanges, OnDestroy, MapAncho
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngOnInit(): void;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MapMarker, "map-marker", ["mapMarker"], { "title": "title"; "position": "position"; "label": "label"; "clickable": "clickable"; "options": "options"; }, { "animationChanged": "animationChanged"; "mapClick": "mapClick"; "clickableChanged": "clickableChanged"; "cursorChanged": "cursorChanged"; "mapDblclick": "mapDblclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "draggableChanged": "draggableChanged"; "mapDragstart": "mapDragstart"; "flatChanged": "flatChanged"; "iconChanged": "iconChanged"; "mapMousedown": "mapMousedown"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "mapMouseup": "mapMouseup"; "positionChanged": "positionChanged"; "mapRightclick": "mapRightclick"; "shapeChanged": "shapeChanged"; "titleChanged": "titleChanged"; "visibleChanged": "visibleChanged"; "zindexChanged": "zindexChanged"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MapMarker, "map-marker", ["mapMarker"], { "title": "title"; "position": "position"; "label": "label"; "clickable": "clickable"; "options": "options"; "icon": "icon"; }, { "animationChanged": "animationChanged"; "mapClick": "mapClick"; "clickableChanged": "clickableChanged"; "cursorChanged": "cursorChanged"; "mapDblclick": "mapDblclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "draggableChanged": "draggableChanged"; "mapDragstart": "mapDragstart"; "flatChanged": "flatChanged"; "iconChanged": "iconChanged"; "mapMousedown": "mapMousedown"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "mapMouseup": "mapMouseup"; "positionChanged": "positionChanged"; "mapRightclick": "mapRightclick"; "shapeChanged": "shapeChanged"; "titleChanged": "titleChanged"; "visibleChanged": "visibleChanged"; "zindexChanged": "zindexChanged"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<MapMarker, never>;
 }