Hello everyone, I hope you are doing.
today I would like to explain how to use google maps places autocomplete without any libraries or npm's packages and headache 😂 so that let's get started
Setup and Installing React JS
let's do it very quick just follow the steps I suppose you have some background how to do so
3.
4.
5.
6.
7.
the first thing you have to do in index.html after setup the project is that
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> React js with Google Map AutoComplete </title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
** <script
src="https://maps.googleapis.com/maps/api/js?key="your-api-key"&libraries=places&callback=initMap"
async
></script>**
</body>
</html>
after that create a component for Map using the library @react-google-maps/api
import React, { useState, useCallback } from 'react'
import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'
const mapStyle = {
height: '300px',
width: '100%'
}
const Map = () => {
const DEFAULT_ZOOM = 5
const { isLoaded } = useJsApiLoader({
id: 'google-map-script',
googleMapsApiKey: "your-api-key"
})
const [map, setMap] = React.useState(null)
const [markerPosition, setMarkerPosition] = useState({
lat: 28.0289837,
lng: 1.6666663,
})
const [defaultLocation, setDefaultLocation] = useState({
lat: 28.0289837,
lng: 1.6666663,
})
const onLoad = useCallback((map)=> {
const bounds = new window.google.maps.LatLngBounds({
lat: 28.0289837,
lng: 1.6666663,
});
map.fitBounds(bounds);
setMap(map)
}, [])
const onUnmount = useCallback(() =>{
setMap(null)
}, [])
const handelClickOnMap = ()=> {
}
return (
<div>
{
isLoaded ? (
<GoogleMap
onLoad={onLoad}
center={defaultLocation}
zoom={DEFAULT_ZOOM}
mapContainerStyle={mapStyle}
onClick={handelClickOnMap}
onUnmount={onUnmount}
>
<Marker position={markerPosition} />
</GoogleMap>
) : <></>
}
</div>
)
}
export default Map
after that import Map component in App.jsx file
and now let's create our input for search for places with autocomplete (suggestion places)
import { useRef, useState } from 'react'
import MapView from './components/Map'
function App() {
const inputRef = useRef()
const inputStyle= {
boxShadow: 'inset 0 0 10px #eee !important',
border: '2px solid #eee',
width: '456px',
height: '40px',
marginLeft: '16px',
borderRadius: '20px',
fontWeight: '300 !important',
outline: 'none',
padding: '10px 20px',
marginBottom: '10px',
}
const autoComplete = new window.google.maps.places.Autocomplete(
inputRef.current,
)
autoComplete.addListener('place_changed', () => {
const place = autoComplete.getPlace()
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
alert("this location not available")
}
if (place.geometry.viewport || place.geometry.location) {
// do something
console.log(place.geometry.location)
}
})
return (
<div className="App">
<label >Location</label>
<input
placeholder='type your location'
ref={inputRef}
style={inputStyle}
/>
<MapView/>
</div>
)
}
export default App
and voila here it is the result 😁
Finally, Thank you for reading this post I will glad to hear your feedback.
Github repo for code source
https://github.com/abdeldjalilhachimi/react-google-map-autocomplete
Top comments (6)
Hi,
thank you for your post, this has saved me many hours of work!
I have copy-pasted your code and it seems to be working fine, but I can see that too many requests are send when I type someting in the autocomplete imput:
For example, if I want to find "fuente" (fountain, in Spanish), I type an F, then a U, then a E etc... Only with 4-5 characters I can see 150 requests to the API. Do you know how to fix that?
Thanks!
@boira Well in this case you can use debounce to delay sending a request when the user typing and that's it
Hi,
and how can I use that? I haven't found any parameter or way to add that in your example or in the repo.
Thank you very much for your help :-)
@boira
well first of all
install debounce ==> npm install debounce
and users like this in code
.....
import debounce from 'debounce';
const handlePlaceChanged = debounce(() => {
const place = autoComplete.getPlace();
if (!place.geometry || !place.geometry.location) {
/// do some stuff based on what you want
}
if (place.geometry.viewport || place.geometry.location) {
// do something
console.log(place.geometry.location);
}
}, 500); // Adjust the delay (in milliseconds) according to your needs
autoComplete.addListener('place_changed', handlePlaceChanged);
Hi,
I see, thanks :-).
I will try this approach and see. Nevertheless, I think that the problem is not appearing when getting the place details, but when users types things in the autocomplete input.
Eerytime that a user types a character in the input, many (20, 50...) requests to maps.googleapis.com/maps/api/place... are sent. After those requests, I can see the options to choose and when I click one of them the call to PlaceService.GetPlaceDetails (only one, this is good) is done.
I'll test this approach and investigate deeper. I am a backend developer so React is being a bit hard to understand. But I am very pleased with your help and ideas.
Keep in touch!
Hello, thanks for this tutorial but I am having a major issue even though I wrote my code exactly as you taught. so after the process, the input field showed on the screen but when I try to search for a place I don't see an auto-complete plus on the map I am just getting a blank view. I also cloned your code from GitHub and I am getting the same issue. I used my google API key so my google API key might be the issue but I can see some errors and warnings in my console, I will paste them here maybe it will help give you a better context of my issue
"InvalidValueError: not an instance of HTMLInputElement"
"Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match." - this is a warning in my console
"Source map error: No sources are declared in this source map.
Resource URL: localhost:5173/node_modules/.vite/...
Source Map URL: react.js.map" - another warning in my console
"Source map error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: null
Source Map URL: react_devtools_backend_compact.js.map"
above is how the map field is showing and it does not display a map