npm i react-places-autocomplete
Include the libraries inside the index.html file
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite React App</title> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDN3XsYjMt_4i1WBCTauifs6NOX-th_o4k&libraries=places" async defer></script> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> |
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import React, { useState } from "react"; import PlacesAutocomplete, { geocodeByAddress, getLatLng, } from "react-places-autocomplete"; import "./App.css"; const AddressAutocomplete = () => { const [address, setAddress] = useState(""); const [place, setPlace] = useState(null); // Handle changes in the input field const handleChange = (newAddress) => { setAddress(newAddress); }; // Handle selection of a place from autocomplete const handleSelect = async (selectedAddress) => { setAddress(selectedAddress); try { // Geocode the selected address to get additional details const results = await geocodeByAddress(selectedAddress); const latLng = await getLatLng(results[0]); // Create a place object with details to set in the state const placeDetails = { name: results[0].formatted_address, formatted_address: results[0].formatted_address, place_id: results[0].place_id, geometry: { location: { lat: latLng.lat, lng: latLng.lng, }, }, }; // Set place details in the state setPlace(placeDetails); } catch (error) { console.error("Error getting address details: ", error); } }; return ( <div className="autocomplete-container"> {/* Google Places Autocomplete input field */} <PlacesAutocomplete value={address} onChange={handleChange} onSelect={handleSelect} > {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => ( <div> <input {...getInputProps({ placeholder: "Enter an address", className: "autocomplete-input", })} /> <div className="autocomplete-dropdown"> {loading && <div>Loading...</div>} {suggestions.map((suggestion) => ( <div key={suggestion.placeId} {...getSuggestionItemProps(suggestion)} className="suggestion-item" > {suggestion.description} </div> ))} </div> </div> )} </PlacesAutocomplete> {/* Display place details */} {place && ( <div className="place-info"> <h2>Address Details</h2> <p> <strong>Name:</strong> {place.name} </p> <p> <strong>Formatted Address:</strong> {place.formatted_address} </p> <p> <strong>Place ID:</strong> {place.place_id} </p> <p> <strong>Latitude:</strong> {place.geometry.location.lat} </p> <p> <strong>Longitude:</strong> {place.geometry.location.lng} </p> </div> )} </div> ); }; export default AddressAutocomplete; |
Include the App.css file
App.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.autocomplete-container { display: flex; flex-direction: column; align-items: center; padding: 2rem; min-height: 100vh; box-sizing: border-box; overflow-y: auto; /* Enables scrolling if content exceeds viewport height */ } .autocomplete-input { width: 80%; max-width: 500px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 20px; } .place-info { margin-top: 20px; text-align: left; width: 100%; max-width: 800px; } .place-info h2 { margin-bottom: 10px; } .photos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .photo { border: 1px solid #ccc; border-radius: 5px; padding: 10px; text-align: center; width: 200px; } .photo img { width: 100%; height: auto; border-radius: 5px; } .photo p { margin-top: 5px; font-size: 12px; color: #555; } .autocomplete-dropdown { position: absolute; max-height: 200px; overflow-y: auto; background-color: white; border: 1px solid #ccc; width: 80%; max-width: 500px; } .suggestion-item { padding: 10px; cursor: pointer; } .suggestion-item:hover { background-color: #f5f5f5; } |
