Autocomplete

Here you will find some uses for Google Maps Autocomplete component:

• Pre-requisite: load places library
• Adding Autocomplete to your components
• Adding a custom input for autocomplete
• Adding custom options

Pre-requisite: load places library

Before using Autocomplete, you need to load the places library:

createApp(App)
  .use(VueGoogleMaps, {
    load: {
      key: 'YOUR_API_KEY_COMES_HERE',
      libraries: 'places',
    },
  })
  .mount('#app')

Adding Autocomplete to your components

You can add an Autocomplete to your template using GMapAutocomplete component:

<template>
  <GMapAutocomplete placeholder="This is a placeholder" @place_changed="setPlace" />
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {}
    },
    methods: {
      setPlace() {},
    },
  }
</script>

Adding a custom input for autocomplete

You can customize input for autocomplete.

<template>
  <GMapAutocomplete @place_changed="setPlace">
    <template #input="slotProps">
      <v-text-field
        v-bind="slotProps"
        ref="input"
        prepend-inner-icon="mdi-map-marker"
        hide-details
      />
    </template>
  </GMapAutocomplete>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
    }
  },
  methods: {
    setPlace() {
    }
  }
}
</script>

Adding custom options

You can pass Google Maps Autocomplete options using the prop options:

<template>
    <GMapAutocomplete
        placeholder="This is a placeholder"
       :options="{
            bounds: {north: 1.4, south: 1.2, east: 104, west: 102},
            strictBounds: true
       }"
    />
</template>