vue-google-places/dist/vue-google-places.min.js

Vue Google Places Autocomplete

var VueGooglePlaces=function(e,t,n){"use strict";function o(e){o.installed||(o.installed=!0,e.component("VueGooglePlaces",i))}t=t&&t.hasOwnProperty("default")?t.default:t;var s,a=function(e){if(Object.prototype.hasOwnProperty.call(window,"google"))return Promise.resolve();var n=Object.assign({libraries:"places"},e),o=Object.keys(n).map(function(e){return encodeURIComponent(e)+"="+encodeURIComponent(n[e])}).join("&");return t("https://maps.googleapis.com/maps/api/js?"+o).catch(function(e){s=null,console.warn("Error loading google maps script",e)})},i={props:{apiKey:String,country:String,enableGeolocation:Boolean,enableGeocode:Boolean,value:String,version:String,types:[String,Array],addressFields:Object},data:function(){return{geolocateSet:!1,prepared:!1,textValue:"",currentPlace:null,enterPressListener:null,hasDownBeenPressed:!1}},computed:{getAppendIcon:function(){return this.currentPlace?"close":this.appendIcon}},watch:{country:function(e){e&&this.autocomplete&&(this.autocomplete.componentRestrictions.country=e)},types:function(e){if(e){var t=Array.isArray(e)?e:[e];this.autocomplete.setTypes(t)}}},created:function(){s="function"==typeof this.$gmapApiPromiseLazy?this.$gmapApiPromiseLazy():s||a({key:this.apiKey,v:this.version}),this.parsedAddressFields=Object.assign({street_number:"short_name",route:"long_name",locality:"long_name",administrative_area_level_1:"short_name",administrative_area_level_2:"short_name",administrative_area_level_3:"short_name",postal_code:"short_name"},this.addressFields)},mounted:function(){var e=this;s.then(function(){e.setupGoogle()})},methods:{enableEnterKey:function(e){var t=e.addEventListener,n=function(n,o){if("keydown"===n){var s=o;o=function(t){var n=document.getElementsByClassName("pac-item-selected").length>0;if(13===t.which&&!n){var o=JSON.parse(JSON.stringify(t));o.which=40,o.keyCode=40,console.log("e",o),s.apply(e,[o])}s.apply(e,[t])}}t.apply(e,[n,o])};e.addEventListener=n},setupInput:function(){var e=this;this.element.addEventListener("keydown",function(t){40===t.keyCode&&(e.hasDownBeenPressed=!0)}),this.enterPressListener=window.google.maps.event.addDomListener(this.element,"keydown",function(t){if(t.cancelBubble=!0,!(13!==t.keyCode&&9!==t.keyCode||e.hasDownBeenPressed||t.hasRanOnce)){var n={keyCode:40,hasRanOnce:!0};window.KeyboardEvent&&(n=new window.KeyboardEvent("keydown",n)),google.maps.event.trigger(t.target,"keydown",n)}}),this.element.addEventListener("focus",function(){e.hasDownBeenPressed=!1})},setupGoogle:function(){var e={};if("string"==typeof this.types?e.types=[this.types]:Array.isArray(this.types)&&(e.types=this.types),this.country&&(e.componentRestrictions={country:this.country}),this.element=this.$el,"INPUT"!==this.element.tagName&&(this.element=this.element.querySelector("input")),!this.element)return void console.warn("Input element was not found in "+this.component);this.autocomplete=new window.google.maps.places.Autocomplete(this.element,e),this.setupInput(),this.autocomplete.addListener("place_changed",this.onPlaceChange),this.geocoder=new window.google.maps.Geocoder,this.geolocate()},parsePlace:function(e){var t={};if(void 0!==e.formatted_address&&(this.textValue=e.formatted_address),void 0!==e.address_components){for(var n=0;n<e.address_components.length;n+=1){var o=e.address_components[n].types[0];if(this.parsedAddressFields[o]){var s=e.address_components[n][this.parsedAddressFields[o]];t[o]=s}"country"===o&&(t.country=e.address_components[n].long_name,t.country_code=e.address_components[n].short_name)}t.latitude=e.geometry.location.lat(),t.longitude=e.geometry.location.lng(),t.name=e.name,t.formatted_address=e.formatted_address,t.photos=e.photos,t.place_id=e.place_id,t.place=e}return t},changePlace:function(e){this.$emit("placechanged",e),this.textValue=e?this.textValue:"",this.$emit("input",this.textValue),this.currentPlace=e},onPlaceChange:function(){this.hasDownBeenPressed=!1;var e=this.autocomplete.getPlace();if(!e.geometry)return void this.$emit("noresult",e);var t=this.parsePlace(e);this.changePlace(t)},geolocate:function(){var e=this;if(this.enableGeolocation&&!this.geolocateSet){if(!navigator.geolocation)return;navigator.geolocation.getCurrentPosition(function(t){var n={lat:t.coords.latitude,lng:t.coords.longitude},o=new window.google.maps.Circle({center:n,radius:t.coords.accuracy});e.enableGeocode&&e.geocoder.geocode({location:n},function(t,n){if("OK"===n&&t.length){e.textValue=t[1].formatted_address;var o=e.parsePlace(t[1]);e.changePlace(o)}}),e.autocomplete.setBounds(o.getBounds()),e.geolocateSet=!0})}},renderInput:function(e){return e("input",{attrs:Object.assign({},{type:"text",class:"v-google-places__input",value:this.textValue},this.$attrs)})}},render:function(e){return e("div",{class:"v-google-places"},this.$slots.default||[this.renderInput(e)])},beforeDestroy:function(){this.enterPressListener&&window.google.maps.event.removeListener(this.enterPressListener)}},r={mixins:[{props:{value:String},data:function(){return{val:this.value,place:null}},watch:{value:function(e){this.val=e}},render:function(e){var t=this;return e(i,{ref:"gp",attrs:this.$attrs,on:Object.assign({},this.$listeners,{placechanged:function(e){t.place=e,t.$emit("placechanged",e)},input:function(e){t.val=e,t.$emit("input",e)}})},[this.renderInput()])}}],props:{searchIcon:{type:String,default:function(){return"search"}},clearIcon:{type:String,default:function(){return"close"}}},computed:{getAppendIcon:function(){return this.place?this.clearIcon:this.searchIcon}},methods:{renderInput:function(){var e=this;return this.$createElement(n.VTextField,{attrs:this.$attrs,on:{"click:append":function(){e.$refs.gp.changePlace(null)}},props:{appendIcon:this.getAppendIcon,value:this.val}})}}},c={install:o},l=null;return"undefined"!=typeof window?l=window.Vue:"undefined"!=typeof global&&(l=global.Vue),l&&l.use(c),e.default=c,e.VueGooglePlaces=i,e.VuetifyGooglePlaces=r,e}({},loadJS,Vuetify);