Any new updates on @angular/google-maps for new google.maps.marker.AdvancedMarkerElement?

Question

I cannot import any component for new updates on Markers based on the new update google.maps.marker.AdvancedMarkerElement. Cannot use component in my angular app. It says it is not a known element of angular components.

`<ion-content [fullscreen]="true">
    <div id="map">
      <google-map
        height="100%"
        width="100%"
        #map
        dndDropzone
        [center]="center"
        (mapMousemove)="onMouseMove($event)"
        (dndDrop)="onDrop($event)"
        (mapClick)="onMapClick($event)"
      >
        @for (marker of markers; track $index) {
        <map-marker
          [position]="marker.position"
          [icon]="marker.icon!"
          (shapeChanged)="marker.markerShape"
          [draggable]="true"
        ></map-marker>

        }
      </google-map>
    </div>
  </ion-content>`

Answer 1

It will be available at @angular/google-maps version 17.3

There was already a commit 3 weeks ago to implement Advanced Marker for @angular/google-maps which was set to be released on version 17.3. It is currently available on the pre-released version of 17.3.

To try it out, you can update your @angular/google-maps to beta version by running the following command in the terminal:

ng update @angular/google-maps --next

the --next flag will update your current stable version to the next/beta version - v17.3.0-next.0.

NOTE: The stable version is v17.2.1 as of writing this. You can disregard this step once the v17.3 becomes a stable version.

Since Advanced Markers requires Map ID, you should make sure to use a Map ID.

Now instead of using <map-marker />, you should use the <map-advanced-marker />. Your code should look something like this:

app.component.html

<google-map 
  height="400px"
  width="750px"
  [center]="center"
  [zoom]="zoom"
  mapId="MAP_ID_HERE"
  >
    @for (position of markerPositions; track position) {
      <map-advanced-marker [position]="position" />
    }
</google-map>

app.component.tsx

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  center: google.maps.LatLngLiteral = { lat: 24, lng: 12 };
  zoom = 4;
  markerPositions: google.maps.LatLngLiteral[] = [{ lat: 24, lng: 12 }];
}

Here's a proof of concept devbox. (just change the MAP_ID and API_KEY with your own)