CODEWITHSUNDEEP
reactjsreact-google-maps-api
xyz83242
xyz83242

Reputation: 824

React with Google Maps @react-google-maps/api google.maps.Marker is deprecated

I have been running @react-google-maps/api for a project number of years. Since 21st February 2024 I have been getting a deprecation warning:

As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. Please see https://developers.google.com/maps/deprecations for deprecation details.

What I am hoping to do is to be able to update my code to reflect the changes. I was hoping to find the answers in the documentation. But the official documentation from the NPM repo seems to be broken:

https://www.npmjs.com/package/@react-google-maps/api - scroll down to the reference to the official documentation

I have tried to look on Stackoverflow and also Googled out the issue but I did not find any answers.

Does anyone know how to go about this?

I am currently drawing my markers like this:

  drawMarker = () => {
      return <Marker
      position={{
        lat: this.state.lat,
        lng: this.state.lng
      }}
      icon={
        // @ts-expect-error
        new window.google.maps.MarkerImage(
          markerPosition,
          null, /* size is determined at runtime */
          null, /* origin is 0,0 */
          null, /* anchor is bottom center of the scaled image */
          new window.google.maps.Size(48, 48)
        )
      }
    >
    </Marker>
  }

I have tried to replace the MarkerImage with the new AdvancedMarkerElement, but I am just getting a whole bunch of errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'AdvancedMarkerElement')

I am stuck. Does anyone know a solution to this OR maybe know some other library that has all the features of @react-google-maps/api and has this problem resolved?

Upvotes: 3

Views: 2723

Answers (1)

Kevin
Kevin

Reputation: 21

I saw that one comment mentioned that: Not sure if this is helpful but if you work with functional components (and not class based) you can import MarkerF instead of Marker: import {MarkerF} from '@react-google-maps/api. And I tried with it but still got the warning message.

Discussions

Marker will be discontinued on February 21, 2024

21st, 2024, google.maps.Marker is deprecated

Upvotes: 0

Related Questions