I'm currently working on implementing an autocomplete input box using the Google Places API. One thing I've come across is that the API URL needs a callback function to initialize the map.
In my index.html file, I've referenced the Place API URL in the header section:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />>
<script async src="https://maps.googleapis.com/maps/api/js?key=[KEY]&libraries=places"></script>
<title>MyApp</title>
</head>
and then initializing the API within the component's onMount Hook:
onMounted(() => {
autocomplete.value = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
componentRestrictions: { country: ['us'] },
fields: ['address_components'],
types: ['address']
})
autocomplete.value.addListener('place_changed', fillInAddress)
})
However, this approach has led to an error message:
Loading the Google Maps JavaScript API without a callback is not supported
Considering that I need to include the Google Maps Places API in the head of my HTML and can't define the callback function there, how can I resolve this error?