ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
473 stars 114 forks source link

usePlacesAutocompleteService not returning "geometry.location" #154

Open productpeter opened 2 years ago

productpeter commented 2 years ago

This is the code I'm using to configure usePlacesAutocompleteService

const {
    placePredictions,
    getPlacePredictions,
    isPlacePredictionsLoading,
  } = useGoogle({
    apiKey: API_KEY,
    language: "en",
    debounce: 500,
    options: {
      types: [],
      componentRestrictions: { country: "ca" },
      fields: [
        "address_components",
        "geometry.location",
        "place_id",
        "formatted_address",
      ]
    }
  });

This is my response

description: "CN Tower, Bremner Boulevard, Toronto, ON, Canada"
matched_substrings: [{…}]
place_id: "ChIJmzrzi9Y0K4gRgXUc3sTY7RU"
reference: "ChIJmzrzi9Y0K4gRgXUc3sTY7RU"
structured_formatting: {main_text: 'CN Tower', main_text_matched_substrings: Array(1), secondary_text: 'Bremner Boulevard, Toronto, ON, Canada'}
terms: (5) [{…}, {…}, {…}, {…}, {…}]
types: (3) ['tourist_attraction', 'point_of_interest', 'establishment']

The intended response should be

address_components: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
formatted_address: "290 Bremner Blvd, Toronto, ON M5V 3L9, Canada"
geometry: {location: _.Ee}
html_attributions: []
place_id: "ChIJmzrzi9Y0K4gRgXUc3sTY7RU"

Does google not allow such queries?

If so, is my only alternative (without using usePlacesWidget) to get LatLng via Google Map's Geocoding / Places API?

productpeter commented 2 years ago

The syntax above seems to be only available for Google Places Widget (corresponding ReactGoogleAutocomplete, usePlacesWidget in the NPM package) find this in the doc -> google.maps.places.AutocompleteOptions interface https://developers.google.com/maps/documentation/javascript/reference/places-widget

It seems like Google Places Auto Complete Service (used by usePlacesAutocompleteService) actually doesn't have "fields" as an option https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service

I might have to call Google Places Service myself (as part of the same session) to get the format I want upon selecting a location suggestion find this in the doc -> google.maps.places.PlaceResult interface https://developers.google.com/maps/documentation/javascript/reference/places-service

Maybe add this feature to the package? 🙏

ErrorPro commented 2 years ago

@lassoxo Hey, thanks for your issue! I've already seen a few similar requests from other people. I'll definitely check it once I have a chance.

dcruz1990 commented 2 years ago

Hey @lassoxo , i'm facing same issue, could you explain in more depth what you did to get lat long ?

dcruz1990 commented 2 years ago

Just call lat() and lng() using PlacesService

image

productpeter commented 2 years ago

Hey @dcruz1990 you should be able to get lat/lng by calling Google Map's Geocoding / Places API separately or use a different library with geometry support. I was more concerned with the fact that I couldn't utilize session token with this approach.

Keep in mind that whenever an Autocomplete request is called, a session token can be generated which is used along side of a subsequent Place Details call to save money!

usePlacesWidget provided by the package uses session token (and returns lat/lng) by default, however, you can't customize the UI all that much.

Here are some documentations on session tokens: https://developers.google.com/maps/documentation/places/web-service/session-tokens https://developers.google.com/maps/documentation/places/web-service/details#session_tokens

Best of luck!