Google Maps Autocomplete Freighthero

gmaps-autocompete.vue

<template>

    <div class="uk-form-password uk-width-1-1">
        <a v-show="search != ''" @click="clearAddress" class="uk-form-password-toggle uk-icon-close uk-icon-hover"></a>
        <input type="text" v-el:search v-model="search" :class="inputclass" @keyup.enter.stop="">
    </div>

</template>

<script>

   var AddressMixin = require('../../mixins/address');
   var GmapsMixin = require('../../mixins/gmaps');

    module.exports = {

        mixins: [AddressMixin, GmapsMixin],

        props: {
            inputclass: {type: String, default: ''},
            autovalue: {type: Boolean, default: false},
            address: {type: Object, default: function () {
                return defaultAddress;
            }}
        },

        data: function () {
            return {
                search: ''
            }
        },

        created: function () {
            if (this.autovalue && window.TfhProfile && window.TfhProfile.filter.dest) {
                this.search = window.TfhProfile.filter.dest;
            }
        },

        events: {
            'google.map.ready' : function (google) {
                var vm = this, autocomplete = new google.maps.places.Autocomplete(this.$els.search);
                google.maps.event.addListener(autocomplete, 'place_changed', function() {

                    var place = autocomplete.getPlace();

                    if (!place.geometry) {
                        return;
                    }

                    vm.setAddress(place);
                });

            }
        },

        methods: {
            clearAddress: function () {
                this.search = '';
                this.$set('address', this.createAddress());
                this.$dispatch('gmaps.location.picked', '');
            },

            setAddress: function (place) {
                var vm = this, street_number = false;
                console.log(place);
                this.$set('address', {valid: false, data: {}, meta: {}, name_1: '', country: ''});
                if (place.address_components) {
                    place.address_components.forEach(function (component) {
                        switch (component.types[0]) {
                        case 'street_number':
                            street_number = component.long_name;
                            break;
                        case 'route':
                            vm.$set('address.address_1', component.long_name);
                            break;
                        case 'postal_code':
                        case 'postal_code_prefix':
                            vm.$set('address.zip_code', component.long_name);
                            break;
                        case 'locality':
                            vm.$set('address.city', component.long_name);
                            break;
                        case 'country':
                            vm.$set('address.country', component.short_name);
                            break;
                        }
                    });
                }
                if (street_number !== false) {
                    vm.$set('address.address_1', this.address.address_1 + ' ' + street_number);
                }

                this.$set('address.name_1', place.types.indexOf('political') === -1 ? place.name : '');
                this.$set('address.data.lat', place.geometry.location.lat());
                this.$set('address.data.lng', place.geometry.location.lng());
                this.$set('search', place.formatted_address);
                vm.$dispatch('gmaps.location.picked', place.formatted_address);
                vm.$nextTick(function () {
                    document.getSelection().removeAllRanges();
                }); //prevent selecting of text
            }
        }

    };
</script>

gmaps.js

module.exports = {

    created: function () {
        var apikey, loaders = window.googleMapsLoaders || [];
        if (!loaders.length) {
            window.googleMapsLoaders = loaders;
            apikey = this.$root.tfhConfig.google_maps_key;
            loaders.push(this);
            this.$asset({
                js: ['https://www.google.com/jsapi']
            }).then(function () {
                google.load("maps", "3", {other_params: 'libraries=places&key=' + apikey, callback: function () {
                    if (google && google.maps) {
                        loaders.forEach(function (vm) {
                            vm.$root.$broadcast('google.map.ready', google);
                        });
                    }
                }});

            });
        } else {
            loaders.push(this);
        }

    }

};