feat(COMPONENT): add a custom icon to the `@input` property of `map-advanced-marker`

[shangzhouwan]

Feature Description

Can we add custom icon @Input to map-advanced-marker to display different status information for different markers?

Use Case

No response

[tjshiu]

Does this solve your case? : https://github.com/angular/components/blob/1c6a285201f90c1a713347bc4d9b79771ba6c60f/src/google-maps/map-advanced-marker/map-advanced-marker.ts#L92 ?

  /**
   * The DOM Element backing the visual of an AdvancedMarkerElement.
   * Note: AdvancedMarkerElement does not clone the passed-in DOM element. Once the DOM element is passed to an AdvancedMarkerElement, passing the same DOM element to another AdvancedMarkerElement will move the DOM element and cause the previous AdvancedMarkerElement to look empty.
   * See: https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.content
   */
  @Input()
  set content(content: Node | google.maps.marker.PinElement | null) {
    this._content = content;
  }
  private _content: Node | null;

Looks like we are limited by this API: https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions

[shangzhouwan]

https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions

Could you provide a demo?

I want to use different icon images to display different states.

Thanks!

[mtinnes]

How about toggling visibility? I've tried dynamically setting the map to null in options, but has no effect on marker visibility. Would be nice to have a visibility property like the standard marker.