Deprecation of the Marker Class - Google Map API warning

Question

I'm developing an app with google maps typescript api, and today I got this warning message when the app was launched ->

Starting February 21, 2024, google.maps.Marker will no longer be available. Instead, use google.maps.marker.AdvancedMarkerElement. Find more information about the discontinuation at https://developers.google.com/maps/deprecations.

but AdvancedMarkerElement has not all the properties that Marker class has, why is that? I updated @types/google.maps to the latest version and I keep getting the same warning. Anybody know something about it? And how to solve it?

Deter

You'll have to adjust your code to use AdvancedMarkerElement. The properties may not match exactly, but I'd imagine there are ways to have the same functionality. We can help with specific problems you run into, but the answer to your general question is "do what the message tells you to". – Lesalesak

I'm not the only who get into issues implementing this new Class... discord.com/channels/676948200904589322/898688881187225630/… – Deter

I read At this time, google.maps.Marker is not scheduled to be discontinued and At least 12 months notice will be given before support is discontinued so where's the problem? And if there's anything you don't know how to do with advanced markers then ask an on-topic question. – Hatchery

This has been raised also in Public Issue Tracker. You can check it here. – Goar

The broader related question is around the new "mapId" requirement for AdvancedMarkerElement. Every map on every platform now requires a mapId to be created and registered with Google. This enables metering and implies revenue stream (now or in the future). Can the legacy markers be ported to the new marker and remain free? Otherwise, I might consider switching to OpenStreetMaps. – Arana

I think AdvancedMarkerElement is more versatil so you can custom your requirements more easily, about mapID you could be right cause that way Google can count how many times you've load map instances, in the same way Youtube is trying to charge to video views, they following the same line in all of they services which I dont understand they already are selling users info... – Deter

Answer 1

This deprecation warning has nothing to do with @types/google.maps – it's a warning that originates in the Google Maps' libraries you load.

See, Google Maps is versioned. You can explicitly request a version through the optional loading parameter v. If you don't pass one, Google will default to the weekly version – which is where the deprecation warning likely comes from.

Quick "fix" to get rid of this warning: downgrade to the closest minor version, namely 3.55.

Long-term fix: evaluate if and how you can/should migrate your Markers to AdvancedMarkers. Remember, Markers are being deprecated, not discontinued – meaning you can essentially continue using them indefinitely for some (legacy) use cases like 3rd party marker clustering etc. Refer to my Marker Comparison Guide or my Marker Customization Guide if you need to brush up on these concepts.

Lastly, as @ceejayoz suggests in the comments, AdvancedMarkers are essentially a superset of Markers: they extend their functionality and improve performance.

Syncope

Answer 2

"Hello World" Comparison:

Marker (Legacy)

google.maps.Marker is deprecated (February 21st, 2024 (v3.56)).

Docs: https://developers.google.com/maps/documentation/javascript/markers

// Initialize and add the map
let map;

function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    disableDefaultUI: true, // a way to quickly hide all controls
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
  });
}

initMap();

AdvancedMarkerElement (new)

DOCS: https://developers.google.com/maps/documentation/javascript/advanced-markers/overview

Extra step for AdvancedMarkerElement is to Create a map ID.

// Initialize and add the map
let map;

async function initMap_AdvancedMarkerElement() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("AdvancedMarker_MAP"), {
    zoom: 4,
    center: myLatLng,
    disableDefaultUI: true, // a way to quickly hide all controls
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: myLatLng,
    title: "Uluru",
  });
}

initMap_AdvancedMarkerElement();

Related: asynchronous JavaScript

IMPORTANT - A lot of code ideas (Like changing marker icon, marker styles and so on) - completely changed VS Legacy (Follow the docs).

PRE steps (Legacy & Advanced):

1. In both cases you should Get an API key and enable the Maps JavaScript API. https://developers.google.com/maps/documentation/javascript/get-api-key

2. And of course to load the API script (with your api key)

<script async
    src="https://maps.googleapis.com/maps/api/js?your-key=&loading=async&callback=initMap">
</script>

More ways to Load the Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/load-maps-js-api

3. CSS: Add Height to map div. For example: #map {height: 400px;}

Gangway

Nice, very thorough answer! This will help bridge the gap for newcomers +1 – Mylo

Answer 3

Using Advanced Map Marker is extremly slow compared to Legacy Marker in this case:

Generate 50000 Marker with 70 different Icon-URL

Legacy: Marker.setIcon to IconURL

Memory Usage 500MB
Creation of Markers 700ms
Scrolling with all Markers very smooth

Advanced Map Marker

new_marker.content = document.createElement('img');
new_marker.content.src = CalcIconUrl(markers.markerData[i]);

Memory Usage: 3GB
creation of Markers: 15800ms
Scrolling very very slow, NO User Acceptance possible

Increscent

Answer 4

To anyone who is using Vue one of the most tricky things that I get to make it work is that google maps is not accepting reactive or ref map object, so when you declare the instance of the map use shallowRef. This way the map will accept the AdvanceMarker library as the documentation say.

Deter

Answer 5

TypeScript is not happy about this const { AdvancedMarkerElement} = await google.maps.importLibrary("marker");

Property 'AdvancedMarkerElement' does not exist on type 'CoreLibrary | MapsLibrary | PlacesLibrary | GeocodingLibrary | RoutesLibrary | MarkerLibrary | ... 5 more ... | VisualizationLibrary'.ts(2339) Also PinElement is not known.

I have tried to install latest type definitions. npm install @types/googlemaps@latest

Does google depreciate markers before they support advancedmarkers with TypeScript?

Telega

Answer 6

Also to take into account, AdvancedMarker is not supported for StreetViewPanorama (https://issuetracker.google.com/issues/282790637)

So if you use Marker in StreetViewPanorama you're stuck with the warning as far as I know.

Arrowhead