Infobox Component not accepting LatLngLiteral

[prestonbourne]

Infobox Component not accepting LatLngLiteral

My Environment

os: mac
node v18.12.1
react version 18.2.0
webpack@5.74.0
babel-loader@8.2.5
@react-google-maps/2.17.1

How does it behave?

It throws this error when ever I pass in a LatLngLiteral

Overload 1 of 2, '(props: InfoBoxProps | Readonly<InfoBoxProps>): InfoBoxComponent', gave the following error.
  Type 'LatLngLiteral' is missing the following properties from type 'LatLng': equals, toJSON, toUrlValue
Overload 2 of 2, '(props: InfoBoxProps, context: any): InfoBoxComponent', gave the following error.
  Type 'LatLngLiteral' is not assignable to type 'LatLng'.ts(2769) 

How should it behave correctly?

As per the docs, it should accept a LatLngLiteral

Update: So before I the page would crash, however the component is in fact being rendered but the error message persists: This is a personal project so I'm fine ignoring type safety for now but would still like to see this come to resolution.

[JustFly1984]

You can transform LatLngLiteral into LatLng before passing it. I was fixing types based on latest types provided by google maps itself.

[prestonbourne]

You can transform LatLngLiteral into LatLng before passing it. I was fixing types based on latest types provided by google maps itself.

Sorry if this is a silly question but what's the best practice to do so? Would I just typecast it or manually add the missing methods.

[carlfremault]

Hi @Saintpreston ,

I'm pretty much a beginner so not sure if this is helpful but I ran into the same issue and got it working like this:

const center = {
  lat: 50.7,
  lng: 4.257,
};

const centerLatLng = new google.maps.LatLng(center.lat, center.lng);