react-places-autocomplete

import React from 'react'; import PlacesAutocomplete, { geocodeByAddress, getLatLng, } from 'react-places-autocomplete'; // Ensure you load Google Maps JavaScript API in your HTML: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> class LocationSearchInput extends React.Component { constructor(props) { super(props); this.state = { address: '' }; } handleChange = address => { this.setState({ address }); }; handleSelect = address => { geocodeByAddress(address) .then(results => getLatLng(results[0])) .then(latLng => console.log('Success', latLng)) .catch(error => console.error('Error during geocoding:', error)); }; render() { return ( <PlacesAutocomplete value={this.state.address} onChange={this.handleChange} onSelect={this.handleSelect} > {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => ( <div> <input {...getInputProps({ placeholder: 'Search Places ...', className: 'location-search-input', })} /> <div className="autocomplete-dropdown-container"> {loading && <div>Loading...</div>} {suggestions.map(suggestion => { const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item'; const style = suggestion.active ? { backgroundColor: '#fafafa', cursor: 'pointer' } : { backgroundColor: '#ffffff', cursor: 'pointer' }; return ( <div {...getSuggestionItemProps(suggestion, { className, style })} key={suggestion.placeId} // Key is important for React lists > <span>{suggestion.description}</span> </div> ); })} </div> </div> )} </PlacesAutocomplete> ); } } export default LocationSearchInput;