This example shows using the Places Autocomplete widget to update a map and marker in a React application. It uses the vis.gl/react-google-mapsopen source library.The vis.gl/react-google-mapslibrary is a collection of React components and hooks for the Google Maps JavaScript API.
TypeScript
import React, { useState, useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
APIProvider,
ControlPosition,
MapControl,
AdvancedMarker,
Map,
useMap,
useMapsLibrary,
useAdvancedMarkerRef,
AdvancedMarkerRef
} from '@vis.gl/react-google-maps';
const API_KEY =
globalThis.GOOGLE_MAPS_API_KEY?? ( "YOUR_API_KEY" );
const App = () => {
const [selectedPlace, setSelectedPlace] =
useState<google.maps.places.PlaceResult | null>(null);
const [markerRef, marker] = useAdvancedMarkerRef();
return (
<APIProvider
apiKey={API_KEY}
solutionChannel='GMP_devsite_samples_v3_rgmautocomplete'>
<Map
mapId={'bf51a910020fa25a'}
defaultZoom={3}
defaultCenter={{ lat: 22.54992, lng: 0 }}
gestureHandling={'greedy'}
disableDefaultUI={true}
>
<AdvancedMarker ref={markerRef} position={null} />
</Map>
<MapControl position={ControlPosition.TOP}>
<div className= "autocomplete-control" >
<PlaceAutocomplete onPlaceSelect={setSelectedPlace} />
</div>
</MapControl>
<MapHandler place={selectedPlace} marker={marker} />
</APIProvider>
);
};
interface MapHandlerProps {
place: google.maps.places.PlaceResult | null;
marker: google.maps.marker.AdvancedMarkerElement | null;
}
const MapHandler = ({ place, marker }: MapHandlerProps) => {
const map = useMap();
useEffect(() => {
if (!map ||!place ||!marker) return;
if (place.geometry?.viewport) {
map.fitBounds(place.geometry?.viewport);
}
marker.position = place.geometry?.location;
}, [map, place, marker]);
return null;
};
interface PlaceAutocompleteProps {
onPlaceSelect: (place: google.maps.places.PlaceResult | null) => void;
}
const PlaceAutocomplete = ({ onPlaceSelect }: PlaceAutocompleteProps) => {
const [placeAutocomplete, setPlaceAutocomplete] =
useState<google.maps.places.Autocomplete | null>(null);
const inputRef = useRef<HTMLInputElement>(null);
const places = useMapsLibrary('places');
useEffect(() => {
if (!places ||!inputRef.current) return;
const options = {
fields: ['geometry', 'name', 'formatted_address']
};
setPlaceAutocomplete(new places.Autocomplete(inputRef.current, options));
}, [places]);
useEffect(() => {
if (!placeAutocomplete) return;
placeAutocomplete.addListener('place_changed', () => {
onPlaceSelect(placeAutocomplete.getPlace());
});
}, [onPlaceSelect, placeAutocomplete]);
return (
<div className= "autocomplete-container" >
<input ref={inputRef} />
</div>
);
};
const root = createRoot(document.getElementById('app')!);
root.render(<App />);
export default App;
JavaScript
import React, { useState, useEffect, useRef } from "react";
import { createRoot } from "react-dom/client";
import {
APIProvider,
ControlPosition,
MapControl,
AdvancedMarker,
Map,
useMap,
useMapsLibrary,
useAdvancedMarkerRef,
} from "@vis.gl/react-google-maps";
const API_KEY = globalThis.GOOGLE_MAPS_API_KEY?? "YOUR_API_KEY";
const App = () => {
const [selectedPlace, setSelectedPlace] = useState(null);
const [markerRef, marker] = useAdvancedMarkerRef();
return (
<APIProvider
apiKey={API_KEY}
solutionChannel= "GMP_devsite_samples_v3_rgmautocomplete"
>
<Map
mapId={ "bf51a910020fa25a" }
defaultZoom={3}
defaultCenter={{ lat: 22.54992, lng: 0 }}
gestureHandling={ "greedy" }
disableDefaultUI={true}
>
<AdvancedMarker ref={markerRef} position={null} />
</Map>
<MapControl position={ControlPosition.TOP}>
<div className= "autocomplete-control" >
<PlaceAutocomplete onPlaceSelect={setSelectedPlace} />
</div>
</MapControl>
<MapHandler place={selectedPlace} marker={marker} />
</APIProvider>
);
};
const MapHandler = ({ place, marker }) => {
const map = useMap();
useEffect(() => {
if (!map ||!place ||!marker) return;
if (place.geometry?.viewport) {
map.fitBounds(place.geometry?.viewport);
}
marker.position = place.geometry?.location;
}, [map, place, marker]);
return null;
};
const PlaceAutocomplete = ({ onPlaceSelect }) => {
const [placeAutocomplete, setPlaceAutocomplete] = useState(null);
const inputRef = useRef(null);
const places = useMapsLibrary( "places" );
useEffect(() => {
if (!places ||!inputRef.current) return;
const options = {
fields: [ "geometry", "name", "formatted_address" ],
};
setPlaceAutocomplete(new places.Autocomplete(inputRef.current, options));
}, [places]);
useEffect(() => {
if (!placeAutocomplete) return;
placeAutocomplete.addListener( "place_changed", () => {
onPlaceSelect(placeAutocomplete.getPlace());
});
}, [onPlaceSelect, placeAutocomplete]);
return (
<div className= "autocomplete-container" >
<input ref={inputRef} />
</div>
);
};
const root = createRoot(document.getElementById( "app" ));
root.render(<App />);
export default App;
CSS
body {
margin: 0;
font-family: sans-serif;
}
#app {
width: 100vw;
height: 100vh;
}
.autocomplete-container input,
.autocomplete-control {
box-sizing: border-box;
}
.autocomplete-control {
margin: 24px;
background: #fff;
}
.autocomplete-container {
width: 300px;
}
.autocomplete-container input {
width: 100%;
height: 40px;
padding: 0 12px;
font-size: 18px;
}
.autocomplete-container.custom-list {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.autocomplete-container.custom-list-item {
padding: 8px;
}
.autocomplete-container.custom-list-item:hover {
background: lightgrey;
cursor: pointer;
}
HTML
<html> <head> <title>React Google Maps - Autocomplete</title> <link rel= "stylesheet" type= "text/css" href= "./style.css" /> </head> <body> <div id= "app" ></div> <script type= "module" src= "./index" ></script> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone -b sample-rgm-autocomplete https://github /googlemaps/js-samples.gitcd js-samplesnpm inpm start
Other samples can be tried by switching to any branch beginning withsample-SAMPLE_NAME.
git checkout sample-SAMPLE_NAMEnpm inpm start