I have a React + Typescript application that displays an address text input and a map. I have connected Autocomplete to the input element and everything was working fine. I built it and deployed it to AWS S3 as a static site and it’s fine. As I was doing some more editing of my local code, the local version started giving me the above error (I stupidly did not save the code yet). I’m running locally using vite.
The MyMap component is wrapped using the @googlemaps/react-wrapper:
<TextField required id="location-id" label="Enter address" variant="standard" />
:
<Wrapper apiKey={API_KEY} render={render} libraries={["places"]}>
<MyMap coords={coords}
center={center}
style={{width: "calc(65vw-5)", height: "calc(70vh)"}}
setPoint={setCenter}
/>
</Wrapper>
MyMap.tsx:
const options = {
bounds: <the bounds of my area>,
componentRestrictions: {country: 'us', state: 'va'},
strictBounds: false,
fields: ["address_components", "geometry"],
types: ["address", "routes", "locality", "intersection"],
};
export default function MyMap(props: propsType){
:
setMap(new window.google.maps.Map(ref.current, {
center: {lat: DEFAULT_LAT, lng: DEFAULT_LNG},
zoom: DEFAULT_ZOOM,
}));
}
:
// Set up the autocomplete feature
const input = document.getElementById('location-id') as HTMLInputElement;
console.log('found input element: ', input);
const autocomplete = new window.google.maps.places.Autocomplete(input, options);
I get no errors or warnings in the console log. My places API is enabled and works when running the version I deployed two days ago. Is there any way to debug the Autocomplete feature? I see the network calls being made, and they are responding with javascript, e.g. “/**/xdc._66hdg9 && xdc._66hdg9( [4] )”
This is what I’m getting now: