bug(@angular/google-maps/map-marker): <map-marker> ignores icon and setIcon()

[wayneroms]

Reproduction

https://stackblitz.com/edit/components-issue-tqecxh

Steps to reproduce:

1. Create marker with icon property OR call marker.setIcon()

Expected Behavior

renderer uses the icon url provided instead of the default.

Actual Behavior

renderer ignores the icon and always uses the default.

Environment

• Angular: 10.2.3
• CDK/Material: 10.2,3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

HTML:

<google-map height="80vh" width="100%" [zoom]="zoom" [center]="center" [options]="options" (mapClick)="click($event)">
<map-marker #markerElem="mapMarker" *ngFor="let marker of markers" [position]="marker.position"
[label]="marker.label" [title]="marker.title" [options]="marker.options"
(mapClick)="openInfo(markerElem, marker.info)">

TS:

export class ExampleComponent implements OnInit {
@ViewChild(GoogleMap, { static: false }) map: GoogleMap;
zoom = 20;
center: google.maps.LatLngLiteral;
options: google.maps.MapOptions = {
mapTypeId: google.maps.MapTypeId.SATELLITE,
zoomControl: true,
scrollwheel: true,
disableDoubleClickZoom: false,
maxZoom: 20,
minZoom: 1
};
markers: google.maps.Marker[] = [];
constructor() {}
ngOnInit(): void {
const marker = new google.maps.Marker({
icon:
"https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi-dotless.png",
label: "A LABEL",
position: { lat: -27, lng: 153 },
title: "A TITLE"
});
this.markers.push(marker);
marker.setIcon("https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi-dotless.png")
this.center = { lat: -27, lng: 153 };
}
}

[crisbeto]

You aren't supposed to create the google.maps.Marker yourself, you just need to pass in the options object. E.g.

<map-marker [position]="{lat: 24, lng: 12}" [options]="{icon: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi-dotless.png'}"></map-marker>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}