Google Place Autocomplete in ReactJS
Today we will show you how to implement google place autocomplete in ReactJS. We will simply use the google map API to create the autocomplete for google places using ReactJS.
Google Place Autocomplete API in React JS, React component for google autocomplete, Implementing Google Places Autocomplete with ES6, example or tutorial of the google places autocomplete, react js with google maps autocomplete search engine.
Checkout more articles on ReactJS
Way to implement google place autocomplete
1. Google map script
Here we will use the below API to implement the place autocomplete in ReactJS where we use the place libraries.
1 | https://maps.googleapis.com/maps/api/js?key=<YOUR_GOOGLE_MAP_API_KEY>&libraries=places |
2. Implement google map
Let’s start with implementing Google Maps in ReactJS. If you don’t know how to do this then refer to the link below for your reference.
Don’t forget to update the above API in google map example.
3. Design the form
Now we will design the simple form. In which we use the input field for place autocomplete and labels for display purpose.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import React, { useRef, useState } from "react"; const GPlace = () => { const placeInputRef = useRef(null); const [place, setPlace] = useState(null); return ( <> <input type="text" ref={placeInputRef} /> {place && <div style={{ marginTop: 20, lineHeight: '25px' }}> <div style={{ marginBottom: 10 }}><b>Selected Place</b></div> <div><b>Address:</b> {place.address}</div> <div><b>Lat:</b> {place.lat}</div> <div><b>Lng:</b> {place.lng}</div> </div>} </> ); }; export default GPlace; |
4. Initialize the google place autocomplete
It’s time to initialize the google place autocomplete for that we will assign the input reference in google.maps.places.Autocomplete.
To capture place_changed events, we will use google.maps.event.addListener.
GPlace.js
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 | import React, { useEffect, useRef, useState } from "react"; const GPlace = () => { const placeInputRef = useRef(null); const [place, setPlace] = useState(null); useEffect(() => { initPlaceAPI(); }, []); // initialize the google place autocomplete const initPlaceAPI = () => { let autocomplete = new window.google.maps.places.Autocomplete(placeInputRef.current); new window.google.maps.event.addListener(autocomplete, "place_changed", function () { let place = autocomplete.getPlace(); setPlace({ address: place.formatted_address, lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); }); }; return ( <> <input type="text" ref={placeInputRef} /> {place && <div style={{ marginTop: 20, lineHeight: '25px' }}> <div style={{ marginBottom: 10 }}><b>Selected Place</b></div> <div><b>Address:</b> {place.address}</div> <div><b>Lat:</b> {place.lat}</div> <div><b>Lng:</b> {place.lng}</div> </div>} </> ); }; export default GPlace; |
Please refer to App.js code for your reference.
App.js
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 | import React, { useState, useEffect } from 'react'; import GPlace from './GPlace'; // API key of the google map const GOOGLE_MAP_API_KEY = '<YOUR_GOOGLE_MAP_API_KEY>'; // load google map script const loadGoogleMapScript = (callback) => { if (typeof window.google === 'object' && typeof window.google.maps === 'object') { callback(); } else { const googleMapScript = document.createElement("script"); googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}&libraries=places`; window.document.body.appendChild(googleMapScript); googleMapScript.addEventListener("load", callback); } } const App = () => { const [loadMap, setLoadMap] = useState(false); useEffect(() => { loadGoogleMapScript(() => { setLoadMap(true) }); }, []); return ( <div className="App"> <a href="https://www.cluemediator.com">Clue Mediator</a><br /><br /> {!loadMap ? <div>Loading...</div> : <GPlace />} </div> ); } export default App; |
5. Output
That’s it for today.
Thank you for reading. Happy Coding!
Waooh don’t know much about this, but it is something I would love to use sometime. Thanks
We are glad you liked it.
Feel free to share your queries with us.
We are happy to help you!
You can subscribe us to get latest update.
Join us on social pages & Share with your friends. Happy Coding..!!
Thank you!
EXCELLENT!