using google place API for autocomplete without callback function in vuejs

Question

I'm implementing an autocomplete input box using the Google place API. I understand that the API URL requires a callback function for initializing the map.

I'm referencing the place API URL in index.html header:

<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>DocBay</title>
  </head>

and initializing the API in the component 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)
})

This results in this error:

Loading the Google Maps JavaScript API without a callback is not supported

since I've to include the Google Maps Places API in the of my HTML and can't define the callback function in there, how do I get rid of this error?

David Avikasis · Accepted Answer · 2023-01-22 15:31:46Z

0

According to the docs including a callback is mandatory - you can change your script tag to have the global function name like this:

<script>
   window.initMap = function () {
      ...
   };
</script>
<script async src=".../api/js?key=[KEY]&libraries=places&callback=initMap"></script> –

answered Jan 22, 2023 at 15:31

David Avikasis

6462 gold badges9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Avikasis Over a year ago

BTW, somewhere else in the docs they say you can omit the callback but it might be an outdated post

Collectives™ on Stack Overflow

using google place API for autocomplete without callback function in vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related