Vue Google Places Autocomplete
Install
Vue
This module will load all needed google librarys automatically at first usage
Use
<VueGooglePlaces :api-key="apiKey" types="(cities)" country="ua" placeholder="Input your place" @placechanged="onPlaceChanged" @noresult="onNoResult" />
Props
name | type | default | description |
---|---|---|---|
apiKey | String | - | Google api key |
enableGeolocation | Boolean | false | component will ask user geolocation |
enableGeocode | Boolean | false | conponent will automatically find user place by his geolocation. This depends of enableGeolocation property |
version | String | - | version of google maps api |
types | String, Array | - | Google places types See google docs (Table 3) |
Available types:
- geocode
- address
- establishment
- (regions)
- (cities)
Events
placechanged
: Place - when user has selected new placeinput
: String - name of selected placenoresult
: Place - when place has changed but details was not found
Slots
default
- in this slot you can put your own input component
Other frameworks
This component implemented in such frameworks:
Vuetify
<VuetifyGooglePlaces :api-key="apiKey" types="(cities)" country="us" placeholder="Input your place" @placechanged="onPlaceChanged" />
To implement this module in other frameworks - welcome to contribute! Please use VuetifyGooglePlaces as template
Implementation with own input component
To use with own input component use default slot. VueGooglePlaces will automatically find html input element
<VueGooglePlaces :api-key="apiKey" class="subheading" :enable-geolocation="true" types="(cities)" country="us" @placechanged="getAddressData" > <MyInput icon="search" :value="value" :placeholder="$t('Your place')" ... /> </VueGooglePlaces>