google_places_vue.js

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">