javascriptreactjstypescriptgoogle-maps-react

I'm migrating my JSX site to TSX and don't understand how to place my type definitions


Just like the title says I am migrating an app that I created that uses the Google Maps API to render the map and from there I show some information on maps and have some function to pan in if the user clicks something.

the error code that I am getting is this.

Type '{ lat: () => number; lng: () => number; }' is missing the following properties from type 'LatLng': equals, toJSON, toUrlValue

This is the code that is generating the error.

  const {
    ready,
    value,
    suggestions: { status, data },
    setValue,
    clearSuggestions,
  } = usePlacesAutocomplete({
    requestOptions: {
      location: { lat: () => 40.7703, lng: () => -73.9883 }, // This line specifically
      radius: 50 * 1000,
    },
  }); 

This is the panTo function that search is taking into account.

const panTo = React.useCallback(({ lat, lng }) => {
    mapRef.current.panTo({ lat, lng });
    mapRef.current.setZoom(14);
  }, []);

Solution

  • See the documentation for the AutocompletionRequest interface used by requestOptions. The location property is required to be an instance of google.maps.LatLng

    usePlacesAutocomplete({
      location: new google.maps.LatLng(40.7703, -73.9883),
      radius: 50 * 1000,
    });