Add support for AdvancedMarker

[halvtomat]

The google maps Marker element is deprecated as of February 2023, Advanced marker is the new better version.

Read more about Advanced marker here

[HusamElbashir]

Thanks for the heads up! We'll try and work that into our plans.

[ScreamZ]

For more details

[Molanda]

I was able to use the AdvancedMarkerElement by adding marker to the libraries prop.

<GoogleMap :libraries="['marker']" ...

Once I did that, I was able to add the marker as follows (see the Advanced Usage section).

const marker = new this.refMap.api.marker.AdvancedMarkerElement({
  map: this.refMap.map,
  position: {
    lat: -25.363,
    lng: 131.044,
  },
});

@HusamElbashir marker should be added to the list of libraries to avoid any TypeScript warnings...

libraries: {
  type: Array as PropType<("drawing" | "geometry" | "localContext" | "places" | "visualization" | "marker")[]>,
  default: () => ["places"],
},

Thank you for putting the component together!

[allaghi]

I was able to use the AdvancedMarkerElement by adding marker to the libraries prop.

<GoogleMap :libraries="['marker']" ...

Once I did that, I was able to add the marker as follows (see the Advanced Usage section).

const marker = new this.refMap.api.marker.AdvancedMarkerElement({
  map: this.refMap.map,
  position: {
    lat: -25.363,
    lng: 131.044,
  },
});

@HusamElbashir marker should be added to the list of libraries to avoid any TypeScript warnings...

libraries: {
  type: Array as PropType<("drawing" | "geometry" | "localContext" | "places" | "visualization" | "marker")[]>,
  default: () => ["places"],
},

Thank you for putting the component together!

Could you please show us the full example how you solve it ?

Thanks in advance.

[oawebdev]

I was able to use the AdvancedMarkerElement by adding marker to the libraries prop.

<GoogleMap :libraries="['marker']" ...

Once I did that, I was able to add the marker as follows (see the Advanced Usage section).

const marker = new this.refMap.api.marker.AdvancedMarkerElement({
  map: this.refMap.map,
  position: {
    lat: -25.363,
    lng: 131.044,
  },
});

@HusamElbashir marker should be added to the list of libraries to avoid any TypeScript warnings...

libraries: {
  type: Array as PropType<("drawing" | "geometry" | "localContext" | "places" | "visualization" | "marker")[]>,
  default: () => ["places"],
},

Thank you for putting the component together!

Hello! How to use it with MarkerCluster component?

[sbautista05]

Hello, any update on this new feature? Thank you :)

[luisfrancajr]

Hello, is there any way to use MarkerCluster with advanced marker?

[Indre87]

Any updates on this with MarkerCluster?