Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue.component('google-autocomplete', {
props: [],
data: function() {
return {
autoComplete: null,
place: {}
}
},
template:'<input ref="autoComplete" placeholder="Type address..." type="text" class="form-control" v-on:keydown="keyDown"/>',
mounted: function() {
var _root = this;
console.log('Google Places AutoComplete Mounted.');
_root.autoComplete = new google.maps.places.Autocomplete(_root.$refs.autoComplete,{types: ['geocode']});
_root.autoComplete.addListener('place_changed', function() {
var place = _root.autoComplete.getPlace();
_root.placeUpdated(place);
});
},
methods: {
/** Google Place Location Updated **/
placeUpdated: function (place) {
this.place = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
address: place.formatted_address,
};
this.$emit('place_updated', this.place);
console.log('Place emitted.');
},
/** Field Updated **/
keyDown: function () {
this.$emit('key_down');
console.log('keyDown emitted.');
},
}
});
//Usage: <google-autocomplete @place_updated="pickupLocationUpdated" @key_down="clearErrors">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.