AdvancedMarkerElement

[castillo-n]

Hi, first of all, thank you all for doing what you are doing! you make my life easier.
Now to the request. I started seen today a message from google maps
As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued. Please see https://developers.google.com/maps/deprecations for additional details and https://developers.google.com/maps/documentation/javascript/advanced-markers/migration for the migration guide.
I tried it but couldn't make it work. Then I tried looking into the source code for the advanced marker element option but I can't find it. If you do have it already, I am sorry for wasting your time. Thanks!

[usefulthink]

Did you see the migration guide? https://developers.google.com/maps/documentation/javascript/advanced-markers/migration

That should contain everything you need. Feel free to ask If you get stuck on that.

[castillo-n]

thank you so much!

[castillo-n]

I tried and it didn't work
After I changed the libraries from

import { Loader } from '@googlemaps/js-api-loader';
...
const google = await new Loader({
    apiKey: GOOGLE_MAPS_API_KEY,
    version: 'weekly',
    libraries: ['places'],
  }).load();

to

import { Loader } from '@googlemaps/js-api-loader';
...
const google = await new Loader({
    apiKey: GOOGLE_MAPS_API_KEY,
    version: 'weekly',
    libraries: ['places', 'marker'],
  }).load();

the map didn't load.
Even when I changed the call from

        return new google.maps.Marker({

to

        return new google.maps.marker.AdvancedMarkerElement({

the map still didn't load

[castillo-n]

this is my old marker

        return new google.maps.Marker({
          position: new google.maps.LatLng(latitude, longitude),
          title: `Marker at latitude: ${latitude} and longitude: ${longitude}`,
          map: vm.map,
          draggable: false,
          icon: vm.image,
          animation: google.maps.Animation.DROP,
        });

this is my new one after all the modifications (I made changes one by one to see if the map would load but it didn't)

const gz = document.createElement('img');
gz.src = vm.image;
return new google.maps.marker.AdvancedMarkerElement({
          position: { lat: latitude, lng: longitude },
          title: `Marker at latitude: ${latitude} and longitude: ${longitude}`,
          map: vm.map,
          draggable: false,
          content: gz,
          animation: google.maps.Animation.DROP,
        });

[usefulthink]

This isn't really the place for questions like this. If you need assistance, you could ask on stackoverflow or join the Google Maps Platform Discord. Links are here: https://developers.google.com/maps/developer-community

One note about the code you posted: the AdvancedMarkerElement is not a "drop in" replacement for the marker and has different properties and features.