feat(google-maps): add advanced marker

[OgiSss]

This commit introduces the advanced-marker feature to the map package, enabling users to add custom, interactive markers to their maps.

Related #25897

[crisbeto]

Before I can land the change you also have to run yarn approve-api google-maps and push the result.

[Akxe]

This check is here a second time... It should be removed

[mrigi]

Any ETA when we can see this released as part of @angular/google-maps?
Because usage of map-marker brings deprecation message in console which says that MapMarker won't be supported as of 21-Feb-2024. And that date is already in the past.

[Akxe]

@mrigi in 17.3.0 (https://github.com/angular/components/releases/tag/17.3.0-next.0)

[ettubrute47]

Sorry in advance if this isn't the place to put this, but wanted to give some feedback / raise some questions:

I've been playing with the 17.3.0-next.0 pre-release to use the advanced markers and noticed 2 things:

First isn't related to the angular component implementation but advanced markers themselves. I had to create a map Id in google cloud console to display the advanced markers for some reason. I have a feature to 'toggle' visibility of points-of-interests via the map options.styles but since I'm using mapId I get an error saying I can only change style via cloud. I made a new style and mapId and try to change map Id's as a workaround but I got the same 'can't change style if using map Id' error... The google map component has an option for setting mapId programmatically, so you'd think you'd be able to change it? My understanding is I have to choose between dynamically styling maps and displaying advanced markers.

Second thing is when I create advanced markers sequentially inside a component which gets access to AdvancedMarkerElement via ViewChild, the first marker fires off ngAfterViewInit and then the EventEmitter markerInitialized is fired. Subsequent markers flips execution order. To access this.marker.AdvancedMarker,I have to put the code both in the handler for markerInitialized and ngAfterViewInit since sometimes they exist in one only or the other. Not sure if this is expected behavior.

[wandaatest]

Hi i tried advanced marker in marker-clusterer, it doesn't work, but works in <map-marker> tag

<google-map #map
              height="100%" width="100%"
              [center]="center"
              [options]="mapOptions">
    <map-marker-clusterer [gridSize]="30"
                      [imagePath]="markerClustererImagePath">
      @for (position of markers; track position) {
      <map-advanced-marker [position]="position"></map-advanced-marker>
      }
    </map-marker-clusterer>
</google-map>

[OgiSss]

@wandaatest

Hi i tried advanced marker in marker-clusterer, it doesn't work, but works in <map-marker> tag

<google-map #map
              height="100%" width="100%"
              [center]="center"
              [options]="mapOptions">
    <map-marker-clusterer [gridSize]="30"
                      [imagePath]="markerClustererImagePath">
      @for (position of markers; track position) {
      <map-advanced-marker [position]="position"></map-advanced-marker>
      }
    </map-marker-clusterer>
</google-map>

Ok I've found an issue under the hood we use https://www.npmjs.com/package/@googlemaps/markerclustererplus which is deprecated and in my opinion we have to rewrite the MapMarkerClusterer component from scratch and align to this library https://www.npmjs.com/package/@googlemaps/markerclusterer which is recommended.

@crisbeto it is up to you I can take care of this

[crisbeto]

I've had a PR for the alternate clusterer for a while (#24853), but it's unclear how we can roll it out given that the API is completely different. We might just have to maintain two clusterers.

[OgiSss]

Indeed, it seems prudent to maintain two clusters, designating one as deprecated. The same situation is with google.maps.Marker
https://developers.google.com/maps/documentation/javascript/markers based on the documentation markers are legacy.

[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.}