Autocomplete

• Load Google maps places
• Add autocomplete to your components
• Custom options

Load Google maps places

Before using Autocomplete, you should load the places library.

createApp(App)
  .use(VueGoogleMaps, {
    load: {
      key: "",
      libraries: "places"
    }
  })
  .mount("#app");
</script>

Add autocomplete to your components

You can add autocomplete to your maps using GMapAutocomplete component.

<template>
  <GMapAutocomplete
       placeholder="This is a placeholder"
       @place_changed="setPlace"
    >
  </GMapAutocomplete>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
    }
  },
  methods: {
    setPlace() {
    }
  }
}
</script>

Custom options

You can pass google maps auto complete options using options prop

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