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?

[VictorBalbo]

I created a PR to add the new AdvancedMarker component: #263
To be honest the new component doesn't seem to bring any big changes, the only thing I saw different was the option to custumize the pin without actually replacing it by an image, and also removed a lot of events and options that existed in the old component (like the property for animation, which now have to be done by hand). But at least it stops the anoying warnings and can easily replace the Marker component

[HusamElbashir]

Released in v0.21.0. Thanks to @VictorBalbo for the contribution.