use-places-autocomplete | 😎 📍 React hook for Google Maps Places Autocomplete | Frontend Framework library

If you are using useLoadScript of the @react-google-maps/api library and use-places-autocomplete you need to supply the ['places'] as a value of your library to use the Places Autocomplete in your code. Please note that this useLoadScript will load the Google Maps JavaScript Script tag in your code and you don't need to add the script tag in the html file anymore.

From what I understand, your use case where the user will select a place from the autocomplete dropdown and the nearest hospital should be returned in the map.

To achieve this, you need to have this flow:

1. Use use-places-autocomplete to provide place suggestion when searching for a place. This library have a GetGeocode and a GetLatLng that you can use to get the coordinates of the chosen place.
2. Once you have the coordinates, you can use Places API Nearby Search, use the keyword hospital in your request and define a radius. This will search a list of hospital within the defined radius with the chosen place as the center.
3. You can loop through the list of result and pin each coordinates as markers in your map.

Here;s the sample code and a code snippet below. Make sure to add your API Key:

Index.js