├── .babelrc
├── .gitignore
├── .npmignore
├── test
    ├── helpers
    │   ├── webpack.config.test.js
    │   ├── setup.js
    │   └── google_stub.js
    └── index.test.js
├── example
    └── src
    │   ├── app.js
    │   └── index.html
├── LICENSE.md
├── package.json
├── webpack.mix.js
├── .all-contributorsrc
├── webpack.config.js
├── src
    └── VueGoogleAutocomplete.vue
└── README.md


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | mix-manifest.json
4 | example/dist


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .babelrc
2 | webpack.config.js
3 | webpack.mix.js
4 | /test
5 | /.github


--------------------------------------------------------------------------------
/test/helpers/webpack.config.test.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   module: {
3 |     rules: [{
4 |       use: 'vue-loader',
5 |     }],
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/test/helpers/setup.js:
--------------------------------------------------------------------------------
1 | const browserEnv = require('browser-env');
2 | const { join } = require('path');
3 | const hook = require('vue-node');
4 | 
5 | browserEnv();
6 | hook(join(__dirname, 'webpack.config.test.js'));
7 | 


--------------------------------------------------------------------------------
/test/helpers/google_stub.js:
--------------------------------------------------------------------------------
 1 | export default function googleStub() {
 2 |   const google = {
 3 |       maps: {
 4 |         places: {
 5 |           Autocomplete: function () {
 6 |             return {
 7 |               addListener: function () { }
 8 |             }
 9 |           },
10 |           Geocoder: function () {
11 |             return {
12 |               geocode: function () { }
13 |             }
14 |           }
15 |         },
16 |       }
17 |     };
18 | 
19 |   return google;
20 | }
21 | 


--------------------------------------------------------------------------------
/example/src/app.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueGoogleAutocomplete from './../../src/VueGoogleAutocomplete.vue';
 3 | 
 4 | const app = new Vue({
 5 |     el: '#app',
 6 | 
 7 |     components: { VueGoogleAutocomplete },
 8 | 
 9 |     data: {
10 |         address: ''
11 |     },
12 | 
13 |     methods: {
14 |         /**
15 |         * When the location found
16 |         * @param {Object} addressData Data of the found location
17 |         * @param {Object} placeResultData PlaceResult object
18 |         * @param {String} id Input container ID
19 |         */
20 |       getAddressData(addressData, placeResultData, id) {
21 |             this.address = addressData;
22 |       },
23 | 
24 |       handleError(error) {
25 |         alert(error)
26 |       }
27 |     }
28 | });
29 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Dmitriy Olefyrenko <dmitriy.olefirenko@gmail.com>
 4 | 
 5 | > Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | > of this software and associated documentation files (the "Software"), to deal
 7 | > in the Software without restriction, including without limitation the rights
 8 | > to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | > copies of the Software, and to permit persons to whom the Software is
10 | > furnished to do so, subject to the following conditions:
11 | >
12 | > The above copyright notice and this permission notice shall be included in
13 | > all copies or substantial portions of the Software.
14 | >
15 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | > FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | > AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | > THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/test/index.test.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import test from 'ava';
 3 | import googleStub from './helpers/google_stub';
 4 | import VueGoogleAutocomplete from '../src/VueGoogleAutocomplete.vue';
 5 | 
 6 | window.google = global.google = googleStub();
 7 | 
 8 | test('that it has a mounted hook', t => {
 9 |     t.is(typeof VueGoogleAutocomplete.mounted, 'function');
10 | });
11 | 
12 | test('that it renders input', t => {
13 |     let Constructor = Vue.extend(VueGoogleAutocomplete);
14 | 
15 |     let vm = new Constructor({ propsData: {
16 |         'id': 'map'
17 |     }}).$mount();
18 | 
19 |     t.is(vm.$el.nodeName, 'INPUT');
20 |     t.is(vm.$el.type, 'text');
21 | });
22 | 
23 | test('that it renders proper props', t => {
24 |     let Constructor = Vue.extend(VueGoogleAutocomplete);
25 | 
26 |     let vm = new Constructor({ propsData: {
27 |         'id': 'map',
28 |         'classname': 'form-control',
29 |         'placeholder': "Start typing"
30 |     }}).$mount();
31 | 
32 |     t.is(vm.$el.placeholder, "Start typing");
33 |     t.is(vm.$el.className, 'form-control');
34 |     t.is(vm.$el.id, 'map');
35 |     t.is(vm.$el.disabled, false);
36 | 
37 |     let vm2 = new Constructor({ propsData: {
38 |         'id': 'map2',
39 |         'disabled': true
40 |     }}).$mount();
41 | 
42 |     t.is(vm2.$el.disabled, true);
43 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-google-autocomplete",
 3 |   "version": "1.1.4",
 4 |   "description": "Vue component to Google Places Autocomplete",
 5 |   "main": "src/VueGoogleAutocomplete.vue",
 6 |   "homepage": "https://github.com/olefirenko/vue-google-autocomplete",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/olefirenko/vue-google-autocomplete.git"
10 |   },
11 |   "peerDependencies": {
12 |     "vue": ">=2"
13 |   },
14 |   "keywords": [
15 |     "vue",
16 |     "google",
17 |     "autocomplete"
18 |   ],
19 |   "scripts": {
20 |     "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
21 |     "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
22 |     "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
23 |     "production": "cross-env NODE_ENV=production webpack --progress --hide-modules",
24 |     "deploy:example": "gh-pages -d example/dist",
25 |     "test": "NODE_PATH=test ava --verbose"
26 |   },
27 |   "ava": {
28 |     "require": [
29 |       "babel-register",
30 |       "./test/helpers/setup.js"
31 |     ]
32 |   },
33 |   "author": "Dmytro Olefyrenko <dmitriy.olefirenko@gmail.com>",
34 |   "license": "MIT",
35 |   "devDependencies": {
36 |     "all-contributors-cli": "^6.20.0",
37 |     "ava": "^0.18.2",
38 |     "babel-register": "^6.24.0",
39 |     "browser-env": "^2.0.25",
40 |     "cross-env": "^3.2.4",
41 |     "gh-pages": "^0.12.0",
42 |     "laravel-mix": "^0.8.8",
43 |     "vue": "^2.2.1",
44 |     "vue-node": "^1.0.2",
45 |     "webpack": "^2.3.2"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | let mix = require('laravel-mix');
 2 | 
 3 | /*
 4 |  |--------------------------------------------------------------------------
 5 |  | Mix Asset Management
 6 |  |--------------------------------------------------------------------------
 7 |  |
 8 |  | Mix provides a clean, fluent API for defining some Webpack build steps
 9 |  | for your Laravel application. By default, we are compiling the Sass
10 |  | file for your application, as well as bundling up your JS files.
11 |  |
12 |  */
13 | 
14 | mix.js('example/src/app.js', 'example/dist/');
15 | 
16 | // Full API
17 | // mix.js(src, output);
18 | // mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
19 | // mix.extract(vendorLibs);
20 | // mix.sass(src, output);
21 | // mix.less(src, output);
22 | // mix.stylus(src, output);
23 | // mix.browserSync('my-site.dev');
24 | // mix.combine(files, destination);
25 | // mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
26 | // mix.copy(from, to);
27 | // mix.minify(file);
28 | // mix.sourceMaps(); // Enable sourcemaps
29 | // mix.version(); // Enable versioning.
30 | // mix.disableNotifications();
31 | // mix.setPublicPath('path/to/public');
32 | // mix.setResourceRoot('prefix/for/resource/locators');
33 | // mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
34 | // mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
35 | // mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
36 | // mix.options({
37 | //   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
38 | //   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
39 | //   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
40 | //   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
41 | // });
42 | 


--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" />
 5 | 
 6 |     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCe1exctmeJjIb4guyT6newSpyJ7kA3aLc&libraries=places"></script>
 7 | </head>
 8 | <body>
 9 | <section class="hero is-medium is-primary is-bold">
10 |     <div class="hero-body">
11 |         <div class="container">
12 |             <h1 class="title is-2">Vue Google Autocomplete</h1>
13 |             <h2 class="subtitle">A Vue.js autosuggest component for the Google Maps Places API</h2>
14 |         </div>
15 |     </div>
16 | </section>
17 | 
18 | <section class="hero">
19 |     <div class="hero-body">
20 |         <div class="container" id="app">
21 |             <h3 class="title is-4">Start typing an address and below you will see found result,
22 |                 <a v-on:click="$refs.address.geolocate()">or force current location</a>
23 |             </h3>
24 |             <p class="control">
25 |                 <vue-google-autocomplete
26 |                     id="map"
27 |                     ref="address"
28 |                     classname="input"
29 |                     placeholder="Start typing"
30 |                     v-on:placechanged="getAddressData"
31 |                     v-on:error="handleError"
32 |                     country="sg"
33 |                 >
34 |                 </vue-google-autocomplete>
35 |             </p>
36 | 
37 |             <div class="message is-success" v-show="address">
38 |                 <div class="message-body">{{ address }}</div>
39 |             </div>
40 |         </div>
41 |     </div>
42 | </section>
43 | <footer class="footer">
44 |     <div class="container">
45 |         <div class="content">
46 |             <p>
47 |                 <a href="https://github.com/olefirenko/vue-google-autocomplete">View project on GitHub</a>
48 |             </p>
49 |         </div>
50 |     </div>
51 | </footer>
52 | 
53 | <script src="../dist/app.js"></script>
54 | 
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/.all-contributorsrc:
--------------------------------------------------------------------------------
  1 | {
  2 |   "files": [
  3 |     "README.md"
  4 |   ],
  5 |   "imageSize": 100,
  6 |   "commit": false,
  7 |   "contributors": [
  8 |     {
  9 |       "login": "olefirenko",
 10 |       "name": "Dmytro Olefyrenko",
 11 |       "avatar_url": "https://avatars.githubusercontent.com/u/5434459?v=4",
 12 |       "profile": "https://olefyrenko.com/",
 13 |       "contributions": [
 14 |         "code"
 15 |       ]
 16 |     },
 17 |     {
 18 |       "login": "daryledesilva",
 19 |       "name": "Daryle Dale De Silva",
 20 |       "avatar_url": "https://avatars.githubusercontent.com/u/4393436?v=4",
 21 |       "profile": "http://www.daryledesilva.com/",
 22 |       "contributions": [
 23 |         "code"
 24 |       ]
 25 |     },
 26 |     {
 27 |       "login": "DjilanoS",
 28 |       "name": "DjilanoS",
 29 |       "avatar_url": "https://avatars.githubusercontent.com/u/84568557?v=4",
 30 |       "profile": "https://github.com/DjilanoS",
 31 |       "contributions": [
 32 |         "maintenance"
 33 |       ]
 34 |     },
 35 |     {
 36 |       "login": "juanvillegas",
 37 |       "name": "Juan Villegas",
 38 |       "avatar_url": "https://avatars.githubusercontent.com/u/773149?v=4",
 39 |       "profile": "https://github.com/juanvillegas",
 40 |       "contributions": [
 41 |         "code"
 42 |       ]
 43 |     },
 44 |     {
 45 |       "login": "hughsaffar",
 46 |       "name": "Hugh Saffar",
 47 |       "avatar_url": "https://avatars.githubusercontent.com/u/10440022?v=4",
 48 |       "profile": "https://houmaan.dev/",
 49 |       "contributions": [
 50 |         "code"
 51 |       ]
 52 |     },
 53 |     {
 54 |       "login": "liliumdev",
 55 |       "name": "Ahmed",
 56 |       "avatar_url": "https://avatars.githubusercontent.com/u/8971846?v=4",
 57 |       "profile": "https://www.lilium.dev/",
 58 |       "contributions": [
 59 |         "code"
 60 |       ]
 61 |     },
 62 |     {
 63 |       "login": "ankurk91",
 64 |       "name": "Ankur Kumar",
 65 |       "avatar_url": "https://avatars.githubusercontent.com/u/6111524?v=4",
 66 |       "profile": "https://ankurk91.github.io/",
 67 |       "contributions": [
 68 |         "code"
 69 |       ]
 70 |     },
 71 |     {
 72 |       "login": "ArturGrigio",
 73 |       "name": "Artur Grigio",
 74 |       "avatar_url": "https://avatars.githubusercontent.com/u/6424589?v=4",
 75 |       "profile": "https://github.com/ArturGrigio",
 76 |       "contributions": [
 77 |         "code"
 78 |       ]
 79 |     },
 80 |     {
 81 |       "login": "bhrutledge",
 82 |       "name": "Brian Rutledge",
 83 |       "avatar_url": "https://avatars.githubusercontent.com/u/1326704?v=4",
 84 |       "profile": "https://bhrutledge.com/",
 85 |       "contributions": [
 86 |         "code"
 87 |       ]
 88 |     },
 89 |     {
 90 |       "login": "bryanjamesmiller",
 91 |       "name": "Bryan Miller",
 92 |       "avatar_url": "https://avatars.githubusercontent.com/u/8781182?v=4",
 93 |       "profile": "https://github.com/bryanjamesmiller",
 94 |       "contributions": [
 95 |         "code"
 96 |       ]
 97 |     },
 98 |     {
 99 |       "login": "cgs",
100 |       "name": "Chris Sepic",
101 |       "avatar_url": "https://avatars.githubusercontent.com/u/16057?v=4",
102 |       "profile": "https://github.com/cgs",
103 |       "contributions": [
104 |         "code"
105 |       ]
106 |     },
107 |     {
108 |       "login": "mrgix",
109 |       "name": "Dennis van Breukelen",
110 |       "avatar_url": "https://avatars.githubusercontent.com/u/6233470?v=4",
111 |       "profile": "https://github.com/mrgix",
112 |       "contributions": [
113 |         "code"
114 |       ]
115 |     },
116 |     {
117 |       "login": "Eoksni",
118 |       "name": "Dmitry Mazurok",
119 |       "avatar_url": "https://avatars.githubusercontent.com/u/2010503?v=4",
120 |       "profile": "https://github.com/Eoksni",
121 |       "contributions": [
122 |         "code"
123 |       ]
124 |     },
125 |     {
126 |       "login": "julianfox",
127 |       "name": "Julian Renard",
128 |       "avatar_url": "https://avatars.githubusercontent.com/u/1648714?v=4",
129 |       "profile": "https://github.com/julianfox",
130 |       "contributions": [
131 |         "code"
132 |       ]
133 |     },
134 |     {
135 |       "login": "leonardoarroyo",
136 |       "name": "Leonardo Arroyo",
137 |       "avatar_url": "https://avatars.githubusercontent.com/u/4290407?v=4",
138 |       "profile": "http://leonardoarroyo.com/",
139 |       "contributions": [
140 |         "code"
141 |       ]
142 |     },
143 |     {
144 |       "login": "probil",
145 |       "name": "Max Lyashuk",
146 |       "avatar_url": "https://avatars.githubusercontent.com/u/6773202?v=4",
147 |       "profile": "https://probil.github.io/",
148 |       "contributions": [
149 |         "code"
150 |       ]
151 |     },
152 |     {
153 |       "login": "mgibowski",
154 |       "name": "Michał Gibowski",
155 |       "avatar_url": "https://avatars.githubusercontent.com/u/617315?v=4",
156 |       "profile": "https://mgibowski.dev/",
157 |       "contributions": [
158 |         "code"
159 |       ]
160 |     },
161 |     {
162 |       "login": "mickeyschwab",
163 |       "name": "Mickey Schwab",
164 |       "avatar_url": "https://avatars.githubusercontent.com/u/2643491?v=4",
165 |       "profile": "https://mickeyschwab.com/",
166 |       "contributions": [
167 |         "code"
168 |       ]
169 |     },
170 |     {
171 |       "login": "rleger",
172 |       "name": "Romain Léger",
173 |       "avatar_url": "https://avatars.githubusercontent.com/u/3156035?v=4",
174 |       "profile": "http://www.lelaboratoiredeco.fr/",
175 |       "contributions": [
176 |         "code"
177 |       ]
178 |     },
179 |     {
180 |       "login": "skmbr",
181 |       "name": "Simon Kimber",
182 |       "avatar_url": "https://avatars.githubusercontent.com/u/1945312?v=4",
183 |       "profile": "https://skmbr.uk/",
184 |       "contributions": [
185 |         "code"
186 |       ]
187 |     },
188 |     {
189 |       "login": "syffs",
190 |       "name": "syffs",
191 |       "avatar_url": "https://avatars.githubusercontent.com/u/4192037?v=4",
192 |       "profile": "https://github.com/syffs",
193 |       "contributions": [
194 |         "code"
195 |       ]
196 |     },
197 |     {
198 |       "login": "yannbertrand",
199 |       "name": "Yann Bertrand",
200 |       "avatar_url": "https://avatars.githubusercontent.com/u/5855339?v=4",
201 |       "profile": "http://yann-bertrand.fr/",
202 |       "contributions": [
203 |         "code"
204 |       ]
205 |     },
206 |     {
207 |       "login": "ciaasteczkowy",
208 |       "name": "ciaasteczkowy",
209 |       "avatar_url": "https://avatars.githubusercontent.com/u/509463?v=4",
210 |       "profile": "https://github.com/ciaasteczkowy",
211 |       "contributions": [
212 |         "code"
213 |       ]
214 |     },
215 |     {
216 |       "login": "crabaux",
217 |       "name": "crabaux",
218 |       "avatar_url": "https://avatars.githubusercontent.com/u/7647886?v=4",
219 |       "profile": "https://www.linkedin.com/in/cyril-rabaux-90141a82/",
220 |       "contributions": [
221 |         "code"
222 |       ]
223 |     }
224 |   ],
225 |   "contributorsPerLine": 7,
226 |   "projectName": "vue-google-autocomplete",
227 |   "projectOwner": "olefirenko",
228 |   "repoType": "github",
229 |   "repoHost": "https://github.com",
230 |   "skipCi": true,
231 |   "commitConvention": "none"
232 | }
233 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | let path = require('path');
  2 | let webpack = require('webpack');
  3 | let Mix = require('laravel-mix').config;
  4 | let plugins = require('laravel-mix').plugins;
  5 | 
  6 | 
  7 | /*
  8 |  |--------------------------------------------------------------------------
  9 |  | Mix Initialization
 10 |  |--------------------------------------------------------------------------
 11 |  |
 12 |  | As our first step, we'll require the project's Laravel Mix file
 13 |  | and record the user's requested compilation and build steps.
 14 |  | Once those steps have been recorded, we may get to work.
 15 |  |
 16 |  */
 17 | 
 18 | Mix.initialize();
 19 | 
 20 | 
 21 | /*
 22 |  |--------------------------------------------------------------------------
 23 |  | Webpack Context
 24 |  |--------------------------------------------------------------------------
 25 |  |
 26 |  | This prop will determine the appropriate context, when running Webpack.
 27 |  | Since you have the option of publishing this webpack.config.js file
 28 |  | to your project root, we will dynamically set the path for you.
 29 |  |
 30 |  */
 31 | 
 32 | module.exports.context = Mix.Paths.root();
 33 | 
 34 | 
 35 | /*
 36 |  |--------------------------------------------------------------------------
 37 |  | Webpack Entry
 38 |  |--------------------------------------------------------------------------
 39 |  |
 40 |  | We'll first specify the entry point for Webpack. By default, we'll
 41 |  | assume a single bundled file, but you may call Mix.extract()
 42 |  | to make a separate bundle specifically for vendor libraries.
 43 |  |
 44 |  */
 45 | 
 46 | module.exports.entry = Mix.entry();
 47 | 
 48 | 
 49 | /*
 50 |  |--------------------------------------------------------------------------
 51 |  | Webpack Output
 52 |  |--------------------------------------------------------------------------
 53 |  |
 54 |  | Webpack naturally requires us to specify our desired output path and
 55 |  | file name. We'll simply echo what you passed to with Mix.js().
 56 |  | Note that, for Mix.version(), we'll properly hash the file.
 57 |  |
 58 |  */
 59 | 
 60 | module.exports.output = Mix.output();
 61 | 
 62 | 
 63 | /*
 64 |  |--------------------------------------------------------------------------
 65 |  | Rules
 66 |  |--------------------------------------------------------------------------
 67 |  |
 68 |  | Webpack rules allow us to register any number of loaders and options.
 69 |  | Out of the box, we'll provide a handful to get you up and running
 70 |  | as quickly as possible, though feel free to add to this list.
 71 |  |
 72 |  */
 73 | 
 74 | let vueExtractTextPlugin = false;
 75 | 
 76 | if (Mix.options.extractVueStyles) {
 77 |     vueExtractTextPlugin = Mix.vueExtractTextPlugin();
 78 | 
 79 |     module.exports.plugins = (module.exports.plugins || []).concat(vueExtractTextPlugin);
 80 | }
 81 | 
 82 | 
 83 | module.exports.module = {
 84 |     rules: [
 85 |         {
 86 |             test: /\.vue$/,
 87 |             loader: 'vue-loader',
 88 |             options: {
 89 |                 loaders: Mix.options.extractVueStyles ? {
 90 |                     js: 'babel-loader' + Mix.babelConfig(),
 91 |                     scss: vueExtractTextPlugin.extract({
 92 |                         use: 'css-loader!sass-loader',
 93 |                         fallback: 'vue-style-loader'
 94 |                     }),
 95 |                     sass: vueExtractTextPlugin.extract({
 96 |                         use: 'css-loader!sass-loader?indentedSyntax',
 97 |                         fallback: 'vue-style-loader'
 98 |                     }),
 99 |                     stylus: vueExtractTextPlugin.extract({
100 |                         use: 'css-loader!stylus-loader?paths[]=node_modules',
101 |                         fallback: 'vue-style-loader'
102 |                     }),
103 |                     css: vueExtractTextPlugin.extract({
104 |                         use: 'css-loader',
105 |                         fallback: 'vue-style-loader'
106 |                     })
107 |                 }: {
108 |                     js: 'babel-loader' + Mix.babelConfig(),
109 |                     scss: 'vue-style-loader!css-loader!sass-loader',
110 |                     sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
111 |                     stylus: 'vue-style-loader!css-loader!stylus-loader?paths[]=node_modules'
112 |                 },
113 | 
114 |                 postcss: Mix.options.postCss
115 |             }
116 |         },
117 | 
118 |         {
119 |             test: /\.jsx?$/,
120 |             exclude: /(node_modules|bower_components)/,
121 |             loader: 'babel-loader' + Mix.babelConfig()
122 |         },
123 | 
124 |         {
125 |             test: /\.css$/,
126 |             loaders: ['style-loader', 'css-loader']
127 |         },
128 | 
129 |         {
130 |             test: /\.s[ac]ss$/,
131 |             include: /node_modules/,
132 |             loaders: ['style-loader', 'css-loader', 'sass-loader']
133 |         },
134 | 
135 |         {
136 |             test: /\.html$/,
137 |             loaders: ['html-loader']
138 |         },
139 | 
140 |         {
141 |             test: /\.(png|jpe?g|gif)$/,
142 |             loader: 'file-loader',
143 |             options: {
144 |                 name: 'images/[name].[ext]?[hash]',
145 |                 publicPath: Mix.resourceRoot
146 |             }
147 |         },
148 | 
149 |         {
150 |             test: /\.(woff2?|ttf|eot|svg|otf)$/,
151 |             loader: 'file-loader',
152 |             options: {
153 |                 name: 'fonts/[name].[ext]?[hash]',
154 |                 publicPath: Mix.resourceRoot
155 |             }
156 |         },
157 | 
158 |         {
159 |             test: /\.(cur|ani)$/,
160 |             loader: 'file-loader',
161 |             options: {
162 |                 name: '[name].[ext]?[hash]',
163 |                 publicPath: Mix.resourceRoot
164 |             }
165 |         }
166 |     ]
167 | };
168 | 
169 | 
170 | if (Mix.preprocessors) {
171 |     Mix.preprocessors.forEach(preprocessor => {
172 |         module.exports.module.rules.push(preprocessor.rules());
173 | 
174 |         module.exports.plugins = (module.exports.plugins || []).concat(preprocessor.extractPlugin);
175 |     });
176 | }
177 | 
178 | 
179 | /*
180 |  |--------------------------------------------------------------------------
181 |  | Resolve
182 |  |--------------------------------------------------------------------------
183 |  |
184 |  | Here, we may set any options/aliases that affect Webpack's resolving
185 |  | of modules. To begin, we will provide the necessary Vue alias to
186 |  | load the Vue common library. You may delete this, if needed.
187 |  |
188 |  */
189 | 
190 | module.exports.resolve = {
191 |     extensions: ['*', '.js', '.jsx', '.vue'],
192 | 
193 |     alias: {
194 |         'vue$': 'vue/dist/vue.common.js'
195 |     }
196 | };
197 | 
198 | 
199 | 
200 | /*
201 |  |--------------------------------------------------------------------------
202 |  | Stats
203 |  |--------------------------------------------------------------------------
204 |  |
205 |  | By default, Webpack spits a lot of information out to the terminal,
206 |  | each you time you compile. Let's keep things a bit more minimal
207 |  | and hide a few of those bits and pieces. Adjust as you wish.
208 |  |
209 |  */
210 | 
211 | module.exports.stats = {
212 |     hash: false,
213 |     version: false,
214 |     timings: false,
215 |     children: false,
216 |     errors: false
217 | };
218 | 
219 | process.noDeprecation = true;
220 | 
221 | module.exports.performance = { hints: false };
222 | 
223 | 
224 | 
225 | /*
226 |  |--------------------------------------------------------------------------
227 |  | Devtool
228 |  |--------------------------------------------------------------------------
229 |  |
230 |  | Sourcemaps allow us to access our original source code within the
231 |  | browser, even if we're serving a bundled script or stylesheet.
232 |  | You may activate sourcemaps, by adding Mix.sourceMaps().
233 |  |
234 |  */
235 | 
236 | module.exports.devtool = Mix.sourcemaps;
237 | 
238 | 
239 | 
240 | /*
241 |  |--------------------------------------------------------------------------
242 |  | Webpack Dev Server Configuration
243 |  |--------------------------------------------------------------------------
244 |  |
245 |  | If you want to use that flashy hot module replacement feature, then
246 |  | we've got you covered. Here, we'll set some basic initial config
247 |  | for the Node server. You very likely won't want to edit this.
248 |  |
249 |  */
250 | module.exports.devServer = {
251 |     historyApiFallback: true,
252 |     noInfo: true,
253 |     compress: true,
254 |     quiet: true
255 | };
256 | 
257 | 
258 | 
259 | /*
260 |  |--------------------------------------------------------------------------
261 |  | Plugins
262 |  |--------------------------------------------------------------------------
263 |  |
264 |  | Lastly, we'll register a number of plugins to extend and configure
265 |  | Webpack. To get you started, we've included a handful of useful
266 |  | extensions, for versioning, OS notifications, and much more.
267 |  |
268 |  */
269 | 
270 | module.exports.plugins = (module.exports.plugins || []).concat([
271 |     new webpack.ProvidePlugin(Mix.autoload || {
272 |         jQuery: 'jquery',
273 |         $: 'jquery',
274 |         jquery: 'jquery'
275 |     }),
276 | 
277 |     new plugins.FriendlyErrorsWebpackPlugin(),
278 | 
279 |     new plugins.StatsWriterPlugin({
280 |         filename: 'mix-manifest.json',
281 |         transform: Mix.manifest.transform.bind(Mix.manifest),
282 |     }),
283 | 
284 |     new plugins.WebpackMd5HashPlugin(),
285 | 
286 |     new webpack.LoaderOptionsPlugin({
287 |         minimize: Mix.inProduction,
288 |         options: {
289 |             postcss: Mix.options.postCss,
290 |             context: __dirname,
291 |             output: { path: './' }
292 |         }
293 |     })
294 | ]);
295 | 
296 | 
297 | if (Mix.browserSync) {
298 |     module.exports.plugins.push(
299 |         new plugins.BrowserSyncPlugin(
300 |             Object.assign({
301 |                 host: 'localhost',
302 |                 port: 3000,
303 |                 proxy: 'app.dev',
304 |                 files: [
305 |                     'app/**/*.php',
306 |                     'resources/views/**/*.php',
307 |                     'public/js/**/*.js',
308 |                     'public/css/**/*.css'
309 |                 ]
310 |             }, Mix.browserSync),
311 |             {
312 |                 reload: false
313 |             }
314 |         )
315 |     );
316 | }
317 | 
318 | 
319 | if (Mix.notifications) {
320 |     module.exports.plugins.push(
321 |         new plugins.WebpackNotifierPlugin({
322 |             title: 'Laravel Mix',
323 |             alwaysNotify: true,
324 |             contentImage: Mix.Paths.root('node_modules/laravel-mix/icons/laravel.png')
325 |         })
326 |     );
327 | }
328 | 
329 | 
330 | if (Mix.copy) {
331 |     Mix.copy.forEach(copy => {
332 |         module.exports.plugins.push(
333 |             new plugins.CopyWebpackPlugin([copy])
334 |         );
335 |     });
336 | }
337 | 
338 | 
339 | if (Mix.extract) {
340 |     module.exports.plugins.push(
341 |         new webpack.optimize.CommonsChunkPlugin({
342 |             names: Mix.entryBuilder.extractions.concat([
343 |                 path.join(Mix.js.base, 'manifest').replace(/\\/g, '/')
344 |             ]),
345 |             minChunks: Infinity
346 |         })
347 |     );
348 | }
349 | 
350 | 
351 | if (Mix.inProduction) {
352 |     module.exports.plugins.push(
353 |         new webpack.DefinePlugin({
354 |             'process.env': {
355 |                 NODE_ENV: '"production"'
356 |             }
357 |         }),
358 | 
359 |         new webpack.optimize.UglifyJsPlugin(Mix.options.uglify)
360 |     );
361 | }
362 | 
363 | 
364 | module.exports.plugins.push(
365 |     new plugins.WebpackOnBuildPlugin(
366 |         stats => Mix.events.fire('build', stats)
367 |     )
368 | );
369 | 
370 | 
371 | /*
372 |  |--------------------------------------------------------------------------
373 |  | Mix Finalizing
374 |  |--------------------------------------------------------------------------
375 |  |
376 |  | Now that we've declared the entirety of our Webpack configuration, the
377 |  | final step is to scan for any custom configuration in the Mix file.
378 |  | If mix.webpackConfig() is called, we'll merge it in, and build!
379 |  |
380 |  */
381 | Mix.finalize(module.exports);
382 | 


--------------------------------------------------------------------------------
/src/VueGoogleAutocomplete.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <input
  3 |         ref="autocomplete"
  4 |         type="text"
  5 |         :class="classname"
  6 |         :id="id"
  7 |         :placeholder="placeholder"
  8 |         :disabled="disabled"
  9 |         v-model="autocompleteText"
 10 |         @focus="onFocus()"
 11 |         @blur="onBlur()"
 12 |         @change="onChange"
 13 |         @keypress="onKeyPress"
 14 |         @keyup="onKeyUp"
 15 |     />
 16 | </template>
 17 | 
 18 | <script>
 19 |     const ADDRESS_COMPONENTS = {
 20 |         subpremise : 'short_name',
 21 |         street_number: 'short_name',
 22 |         route: 'long_name',
 23 |         locality: 'long_name',
 24 |         administrative_area_level_1: 'short_name',
 25 |         administrative_area_level_2: 'long_name',
 26 |         country: 'long_name',
 27 |         postal_code: 'short_name'
 28 |     };
 29 | 
 30 |     const CITIES_TYPE = ['locality', 'administrative_area_level_3'];
 31 |     const REGIONS_TYPE = ['locality', 'sublocality', 'postal_code', 'country',
 32 |         'administrative_area_level_1', 'administrative_area_level_2'];
 33 | 
 34 |     /*
 35 |       By default, we're only including basic place data because requesting these 
 36 |       fields place data is not additionally charged by Google. Please refer to:
 37 | 
 38 |       https://developers.google.com/maps/billing/understanding-cost-of-use#basic-data
 39 |     */
 40 |     const BASIC_DATA_FIELDS = ['address_components', 'adr_address', 'alt_id', 
 41 |         'formatted_address', 'geometry', 'icon', 'id', 'name', 
 42 |         'business_status', 'photo', 'place_id', 'scope', 'type', 'url', 
 43 |         'utc_offset_minutes', 'vicinity'];
 44 | 
 45 |     export default {
 46 |         name: 'VueGoogleAutocomplete',
 47 | 
 48 |         props: {
 49 |           id: {
 50 |             type: String,
 51 |             required: true
 52 |           },
 53 | 
 54 |           classname: String,
 55 | 
 56 |           placeholder: {
 57 |             type: String,
 58 |             default: 'Start typing'
 59 |           },
 60 | 
 61 |           disabled: {
 62 |             type: Boolean,
 63 |             default: false
 64 |           },
 65 | 
 66 |           types: {
 67 |             type: String,
 68 |             default: 'address'
 69 |           },
 70 | 
 71 |           fields: {
 72 |             type: Array,
 73 |             default: function() {
 74 |               return BASIC_DATA_FIELDS;
 75 |             },
 76 |           },
 77 | 
 78 |           country: {
 79 |             type: [String, Array],
 80 |             default: null
 81 |           },
 82 | 
 83 |           enableGeolocation: {
 84 |             type: Boolean,
 85 |             default: false
 86 |           },
 87 | 
 88 |           geolocationOptions: {
 89 |             type: Object,
 90 |             default: null
 91 |           }
 92 |         },
 93 | 
 94 |         data() {
 95 |             return {
 96 |                 /**
 97 |                  * The Autocomplete object.
 98 |                  *
 99 |                  * @type {Autocomplete}
100 |                  * @link https://developers.google.com/maps/documentation/javascript/reference#Autocomplete
101 |                  */
102 |                 autocomplete: null,
103 | 
104 |                 /**
105 |                  * Autocomplete input text
106 |                  * @type {String}
107 |                  */
108 |                 autocompleteText: '',
109 | 
110 |                 geolocation: {
111 |                     /**
112 |                      * Google Geocoder Objet
113 |                      * @type {Geocoder}
114 |                      * @link https://developers.google.com/maps/documentation/javascript/reference#Geocoder
115 |                      */
116 |                     geocoder: null,
117 | 
118 |                     /**
119 |                      * Filled after geolocate result
120 |                      * @type {Coordinates}
121 |                      * @link https://developer.mozilla.org/en-US/docs/Web/API/Coordinates
122 |                      */
123 |                     loc: null,
124 | 
125 |                     /**
126 |                      * Filled after geolocate result
127 |                      * @type {Position}
128 |                      * @link https://developer.mozilla.org/en-US/docs/Web/API/Position
129 |                      */
130 |                     position: null
131 |                 }
132 |             }
133 |         },
134 | 
135 |         watch: {
136 |             autocompleteText: function (newVal, oldVal) {
137 | 	            this.$emit('inputChange', { newVal, oldVal }, this.id);
138 |             },
139 |             country: function(newVal, oldVal) {
140 |               this.autocomplete.setComponentRestrictions({
141 |                 country: this.country === null ? [] : this.country
142 |               });
143 |             }
144 |         },
145 | 
146 |         mounted: function() {
147 |           const options = {};
148 | 
149 |           if (this.types) {
150 |             options.types = [this.types];
151 |           }
152 | 
153 |           if (this.country) {
154 |             options.componentRestrictions = {
155 |               country: this.country
156 |             };
157 |           }
158 | 
159 |           this.autocomplete = new google.maps.places.Autocomplete(
160 |                 document.getElementById(this.id),
161 |                 options
162 |             );
163 | 
164 |           this.autocomplete.setFields(this.fields);
165 | 
166 |           this.autocomplete.addListener('place_changed', this.onPlaceChanged);
167 |         },
168 | 
169 |         methods: {
170 |             /**
171 |              * When a place changed
172 |              */
173 |             onPlaceChanged() {
174 |                 let place = this.autocomplete.getPlace();
175 | 
176 |                 if (!place.geometry) {
177 |                   // User entered the name of a Place that was not suggested and
178 |                   // pressed the Enter key, or the Place Details request failed.
179 |                   this.$emit('no-results-found', place, this.id);
180 |                   return;
181 |                 }
182 | 
183 |                 if (place.address_components !== undefined) {
184 |                     // return returnData object and PlaceResult object
185 |                     this.$emit('placechanged', this.formatResult(place), place, this.id);
186 | 
187 |                     // update autocompleteText then emit change event
188 |                     this.autocompleteText = document.getElementById(this.id).value
189 |                     this.onChange()
190 |                 }
191 |             },
192 | 
193 |             /**
194 |              * When the input gets focus
195 |              */
196 |             onFocus() {
197 |               this.biasAutocompleteLocation();
198 |               this.$emit('focus');
199 |             },
200 | 
201 |             /**
202 |              * When the input loses focus
203 |              */
204 |             onBlur() {
205 |               this.$emit('blur');
206 |             },
207 | 
208 |             /**
209 |              * When the input got changed
210 |              */
211 |             onChange() {
212 |               this.$emit('change', this.autocompleteText);
213 |             },
214 | 
215 |             /**
216 |              * When a key gets pressed
217 |              * @param  {Event} event A keypress event
218 |              */
219 |             onKeyPress(event) {
220 |               this.$emit('keypress', event);
221 |             },
222 | 
223 |             /**
224 |              * When a keyup occurs
225 |              * @param  {Event} event A keyup event
226 |              */
227 |             onKeyUp(event) {
228 |               this.$emit('keyup', event);
229 |             },
230 | 
231 |             /**
232 |              * Clear the input
233 |              */
234 |             clear() {
235 |               this.autocompleteText = ''
236 |             },
237 | 
238 |             /**
239 |              * Focus the input
240 |              */
241 |             focus() {
242 |               this.$refs.autocomplete.focus()
243 |             },
244 | 
245 |             /**
246 |              * Blur the input
247 |              */
248 |             blur() {
249 |               this.$refs.autocomplete.blur()
250 |             },
251 | 
252 |             /**
253 |              * Update the value of the input
254 |              * @param  {String} value
255 |              */
256 |             update (value) {
257 |               this.autocompleteText = value
258 |             },
259 | 
260 |             /**
261 |              * Update the coordinates of the input
262 |              * @param  {Coordinates} value
263 |              */
264 |             updateCoordinates (value) {
265 |                 if (!value && !(value.lat || value.lng)) return;
266 |                 if (!this.geolocation.geocoder) this.geolocation.geocoder = new google.maps.Geocoder();
267 |                 this.geolocation.geocoder.geocode({'location': value}, (results, status) => {
268 |                     if (status === 'OK') {
269 |                         results = this.filterGeocodeResultTypes(results);
270 |                         if (results[0]) {
271 |                             this.$emit('placechanged', this.formatResult(results[0]), results[0], this.id);
272 |                             this.update(results[0].formatted_address);
273 |                         } else {
274 |                             this.$emit('error', 'no result for provided coordinates');
275 |                         }
276 |                     } else {
277 |                         this.$emit('error', 'error getting address from coords');
278 |                     }
279 |                 })
280 |             },
281 | 
282 |             /**
283 |              * Update location based on navigator geolocation
284 |              */
285 |             geolocate () {
286 |                 this.updateGeolocation ((geolocation, position) => {
287 |                     this.updateCoordinates(geolocation)
288 |                 })
289 |             },
290 | 
291 |             /**
292 |              * Update internal location from navigator geolocation
293 |              * @param  {Function} (geolocation, position)
294 |              */
295 |             updateGeolocation (callback = null) {
296 |                 if (navigator.geolocation) {
297 |                     let options = {};
298 |                     if(this.geolocationOptions) Object.assign(options, this.geolocationOptions);
299 |                     navigator.geolocation.getCurrentPosition(position => {
300 |                         let geolocation = {
301 |                             lat: position.coords.latitude,
302 |                             lng: position.coords.longitude
303 |                         };
304 |                         this.geolocation.loc = geolocation;
305 |                         this.geolocation.position = position;
306 | 
307 |                         if (callback) callback(geolocation, position);
308 |                     }, err => {
309 |                         this.$emit('error', 'Cannot get Coordinates from navigator', err);
310 |                     }, options);
311 |                 }
312 |             },
313 | 
314 | 
315 |             // Bias the autocomplete object to the user's geographical location,
316 |             // as supplied by the browser's 'navigator.geolocation' object.
317 |             biasAutocompleteLocation () {
318 |                 if (this.enableGeolocation) {
319 |                     this.updateGeolocation((geolocation, position) => {
320 |                         let circle = new google.maps.Circle({
321 |                             center: geolocation,
322 |                             radius: position.coords.accuracy
323 |                         });
324 |                         this.autocomplete.setBounds(circle.getBounds());
325 |                     })
326 |                 }
327 |             },
328 | 
329 |             /**
330 |              * Format result from Geo google APIs
331 |              * @param place
332 |              * @returns {{formatted output}}
333 |              */
334 |             formatResult (place) {
335 |                 let returnData = {};
336 |                 for (let i = 0; i < place.address_components.length; i++) {
337 |                     let addressType = place.address_components[i].types[0];
338 | 
339 |                     if (ADDRESS_COMPONENTS[addressType]) {
340 |                         let val = place.address_components[i][ADDRESS_COMPONENTS[addressType]];
341 |                         returnData[addressType] = val;
342 |                     }
343 |                 }
344 | 
345 |                 returnData['latitude'] = place.geometry.location.lat();
346 |                 returnData['longitude'] = place.geometry.location.lng();
347 |                 return returnData
348 |             },
349 | 
350 |             /**
351 |              * Extract configured types out of raw result as
352 |              * Geocode API does not allow to do it
353 |              * @param results
354 |              * @returns {GeocoderResult}
355 |              * @link https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult
356 |              */
357 |             filterGeocodeResultTypes (results) {
358 |                 if (!results || !this.types) return results;
359 |                 let output = [];
360 |                 let types = [this.types];
361 |                 if (types.includes('(cities)')) types = types.concat(CITIES_TYPE);
362 |                 if (types.includes('(regions)')) types = types.concat(REGIONS_TYPE);
363 | 
364 |                 for (let r of results) {
365 |                     for (let t of r.types) {
366 |                         if (types.includes(t)) {
367 |                             output.push(r);
368 |                             break;
369 |                         }
370 |                     }
371 |                 }
372 |                 return output;
373 |             }
374 |         }
375 |     }
376 | </script>
377 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Google Autocomplete
  2 | 
  3 | [![npm version](https://badgen.net/npm/v/vue-google-autocomplete)](https://www.npmjs.com/package/vue-google-autocomplete) [![sponsored_by](https://badgen.net/badge/sponsored%20by/%F0%9F%A4%96Easy-Peasy.AI/f2a)](https://Easy-Peasy.AI/?utm_source=npm&utm_medium=badge&utm_campaign=vue_google_autocomplete)
  4 | 
  5 | A Vue.js (2.x) autosuggest component for the Google Maps Places API.
  6 | 
  7 | ## Demo
  8 | 
  9 | Live demo: [olefirenko.github.io/vue-google-autocomplete](https://olefirenko.github.io/vue-google-autocomplete/)
 10 | 
 11 | ## Benefits
 12 | 
 13 | I have tried to use different Vue Google Autocomplete components, but did not find any that would solve my needs. So below I would like to mention what you can get from this exact component:
 14 | 
 15 | - Load more than one autocompletion inputs (I could not achieve this with existing vue components)
 16 | - Getting geolocation data (latitude, longitude) for found address object along with other address data (country, city, state, county, street, house number, zip code). So no need to do additional geocode request on backend side.
 17 | - No external dependencies
 18 | - You can get access to underlying [PlaceResult object](https://developers.google.com/maps/documentation/javascript/reference#PlaceResult) to get more details about found location. You are able to specify the specific fields you want to fetch from the PlaceResult object.
 19 | - You can limit results to specific country or use users geolocation data
 20 | 
 21 | ## Installation
 22 | 
 23 | This component uses Google Maps Places API to get geo suggests for autocompletion, so you have to include the Google Maps Places API in the `<head>` of your HTML:
 24 | 
 25 | ```html
 26 | <!DOCTYPE html>
 27 | <html>
 28 |   <head>
 29 |     …
 30 |     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
 31 |   </head>
 32 |   <body>
 33 |     …
 34 |   </body>
 35 | </html>
 36 | ```
 37 | 
 38 | To obtain API key please visit the [Google Developer Console](https://console.developers.google.com). The API's that you have to enable in your Google API Manager Dashboard are [Google Maps Geocoding API](https://developers.google.com/maps/documentation/geocoding/start), [Google Places API Web Service](https://developers.google.com/places/web-service/) and [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/).
 39 | 
 40 | The easiest way to use Vue Google Autocomplete is to install it from **npm** or **yarn**.
 41 | 
 42 | ```sh
 43 | npm install vue-google-autocomplete --save
 44 | ```
 45 | 
 46 | Or
 47 | 
 48 | ```sh
 49 | yarn add vue-google-autocomplete
 50 | ```
 51 | 
 52 | ## Usage
 53 | 
 54 | The Vue Google Autocomplete works out of the box by just including it.
 55 | 
 56 | ```js
 57 | import VueGoogleAutocomplete from "vue-google-autocomplete";
 58 | ```
 59 | 
 60 | In your template you can use this syntax:
 61 | 
 62 | ```html
 63 | <vue-google-autocomplete id="map" classname="form-control" placeholder="Start typing" v-on:placechanged="getAddressData">
 64 | </vue-google-autocomplete>
 65 | ```
 66 | 
 67 | ### Properties
 68 | 
 69 | #### id
 70 | 
 71 | Type: `String`
 72 | 
 73 | `required` ID for the input container.
 74 | 
 75 | #### classname
 76 | 
 77 | Type: `String`
 78 | 
 79 | Class to the input container.
 80 | 
 81 | #### placeholder
 82 | 
 83 | Type: `String`
 84 | Default: `Start typing`
 85 | 
 86 | The input field will get this placeholder text.
 87 | 
 88 | #### types
 89 | 
 90 | Type: `String`
 91 | Default: `address`
 92 | 
 93 | Types supported in place autocomplete requests. [More info](https://developers.google.com/places/supported_types#table3)
 94 | 
 95 | You may find [this example](#correct-usage-of-the-types-parameter) helpful.
 96 | 
 97 | #### fields
 98 | 
 99 | Type: `Array`
100 | Default: `['address_components', 'adr_address', 'alt_id', 'formatted_address', 'geometry', 'icon', 'id', 'name', 'permanently_closed', 'photo', 'place_id', 'scope', 'type', 'url', 'utc_offset', 'vicinity']`
101 | 
102 | Set which data fields to return in the PlaceResult from the Google Autocomplete API when the user selects a place. [Google Autocomplete API by default returns all available data fields](https://developers.google.com/maps/documentation/javascript/places-autocomplete#get_place_information) for the selected place, which may result in additional charges and thus the API users might pay for data they don't need. This package sets a sensible default for the fields value, fetching only the Basic Data fields which do not result in any additional charges. If you want to fetch other fields in addition to the default ones, make sure that the array you pass in to the `fields` prop contains the default fields listed above, and not only the additional fields you want to fetch.
103 | 
104 | Refer to [this page](https://developers.google.com/maps/billing/understanding-cost-of-use#data-skus) for more details on how certain data fields are billed.
105 | 
106 | #### country
107 | 
108 | Type: `String`|`Array`
109 | Default: null
110 | 
111 | Option to restrict the autocomplete search to a particular country. Countries must be passed as a two-character, ISO 3166-1 Alpha-2 compatible country code (i.e. "br", "sg", "fr"). You can provide a single one, or an array of up to 5 country code strings.
112 | Note: this is a dynamic property. You must pass it as `:country=""` to your component, otherwise it won't work. For example:
113 | 
114 | ```html
115 | <vue-google-autocomplete :country="['au', 'nz']"></vue-google-autocomplete>
116 | ```
117 | 
118 | will restrict the countries to Australia and New Zealand.
119 | 
120 | #### enable-geolocation
121 | 
122 | Type: `Boolean`
123 | Default: `false`
124 | 
125 | Bias the search towards user current location.
126 | 
127 | #### geolocationOptions
128 | 
129 | Type: [`Object`](https://developer.mozilla.org/en/docs/Web/API/PositionOptions)
130 | Default: `{}`
131 | 
132 | Allow to configure Options for [`navigator.getCurrentPosition`](https://developer.mozilla.org/en/docs/Web/API/Geolocation/getCurrentPosition)
133 | 
134 | ### Events
135 | 
136 | The component emits next events, which you can listen in your application:
137 | 
138 | #### placechanged
139 | 
140 | Gets triggered when the address data got obtained. This data is available on the returned objects:
141 | 
142 | - `street_number`, `route`, `locality`, `administrative_area_level_1`, `country`, `postal_code`, `latitude`, `longitude`.
143 | - `place` - [PlaceResult object](https://developers.google.com/maps/documentation/javascript/reference#PlaceResult) is available as second parameter.
144 | - `id` a String representing the ID of the autocomplete that triggered the event.
145 | 
146 | #### no-results-found
147 | 
148 | Gets triggered when a user entered the name of a Place that was not suggested and pressed the Enter key, or the Place Details request failed.
149 | 
150 | - `object` an object with a key _name_ representing the user's input.
151 | 
152 | #### focus
153 | 
154 | Gets triggered when the autocomplete input field receives focus.
155 | 
156 | #### blur
157 | 
158 | Gets triggered when the autocomplete input field loses focus.
159 | 
160 | #### inputChange
161 | 
162 | Gets triggered every time autocomplete input got changed
163 | 
164 | #### change
165 | 
166 | Gets triggered when the autocomplete results got changed
167 | 
168 | #### keypress
169 | 
170 | Gets triggered when a key gets pressed
171 | 
172 | #### error
173 | 
174 | Gets triggered when an error is encountered
175 | 
176 | ### Exposed component functions
177 | 
178 | These functions are accessible by setting "ref" on the component ([Refs documentation](https://vuejs.org/v2/guide/components.html#Child-Component-Refs)). See example below how to use these functions.
179 | 
180 | #### clear()
181 | 
182 | Call to clear the value of the user input.
183 | 
184 | #### focus()
185 | 
186 | Call focus to focus on the element
187 | 
188 | #### blur()
189 | 
190 | Call blur to blur (unfocus) the element
191 | 
192 | #### update(value)
193 | 
194 | Call to update the user input with a new value
195 | 
196 | #### updateCoordinates([latlng](https://developers.google.com/maps/documentation/javascript/reference#LatLng))
197 | 
198 | Call to force coordinates and update the input accordingly
199 | 
200 | #### geolocate()
201 | 
202 | Call to retrieve current position from `navigator` and update the input accordingly
203 | 
204 | ### Example
205 | 
206 | Please note that you need to provide what method will listen (`v-on:placechanged`) to an event when the address data is obtained.
207 | 
208 | ```html
209 | <template>
210 |   <div>
211 |     <h2>Your Address</h2>
212 | 
213 |     <vue-google-autocomplete
214 |       ref="address"
215 |       id="map"
216 |       classname="form-control"
217 |       placeholder="Please type your address"
218 |       v-on:placechanged="getAddressData"
219 |       country="sg"
220 |     >
221 |     </vue-google-autocomplete>
222 |   </div>
223 | </template>
224 | 
225 | <script>
226 |   import VueGoogleAutocomplete from "vue-google-autocomplete";
227 | 
228 |   export default {
229 |     components: { VueGoogleAutocomplete },
230 | 
231 |     data: function () {
232 |       return {
233 |         address: "",
234 |       };
235 |     },
236 | 
237 |     mounted() {
238 |       // To demonstrate functionality of exposed component functions
239 |       // Here we make focus on the user input
240 |       this.$refs.address.focus();
241 |     },
242 | 
243 |     methods: {
244 |       /**
245 |        * When the location found
246 |        * @param {Object} addressData Data of the found location
247 |        * @param {Object} placeResultData PlaceResult object
248 |        * @param {String} id Input container ID
249 |        */
250 |       getAddressData: function (addressData, placeResultData, id) {
251 |         this.address = addressData;
252 |       },
253 |     },
254 |   };
255 | </script>
256 | ```
257 | 
258 | #### Correct usage of the types parameter
259 | 
260 | The example below shows the correct usage of the `types` parameter, when limiting the search to cities:
261 | 
262 | ```vue
263 | <vue-google-autocomplete
264 |   id="map2"
265 |   ref="toAddress"
266 |   classname="form-control"
267 |   placeholder="Start typing"
268 |   v-on:placechanged="getToData"
269 |   types="(cities)"
270 |   country="us"
271 | >
272 | </vue-google-autocomplete>
273 | ```
274 | 
275 | ## Contributors ✨
276 | 
277 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
278 | 
279 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
280 | <!-- prettier-ignore-start -->
281 | <!-- markdownlint-disable -->
282 | <table>
283 |   <tr>
284 |     <td align="center"><a href="https://olefyrenko.com/"><img src="https://avatars.githubusercontent.com/u/5434459?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dmytro Olefyrenko</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=olefirenko" title="Code">💻</a></td>
285 |     <td align="center"><a href="http://www.daryledesilva.com/"><img src="https://avatars.githubusercontent.com/u/4393436?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daryle Dale De Silva</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=daryledesilva" title="Code">💻</a></td>
286 |     <td align="center"><a href="https://github.com/DjilanoS"><img src="https://avatars.githubusercontent.com/u/84568557?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DjilanoS</b></sub></a><br /><a href="#maintenance-DjilanoS" title="Maintenance">🚧</a></td>
287 |     <td align="center"><a href="https://github.com/juanvillegas"><img src="https://avatars.githubusercontent.com/u/773149?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Juan Villegas</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=juanvillegas" title="Code">💻</a></td>
288 |     <td align="center"><a href="https://houmaan.dev/"><img src="https://avatars.githubusercontent.com/u/10440022?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hugh Saffar</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=hughsaffar" title="Code">💻</a></td>
289 |     <td align="center"><a href="https://www.lilium.dev/"><img src="https://avatars.githubusercontent.com/u/8971846?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=liliumdev" title="Code">💻</a></td>
290 |     <td align="center"><a href="https://ankurk91.github.io/"><img src="https://avatars.githubusercontent.com/u/6111524?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ankur Kumar</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=ankurk91" title="Code">💻</a></td>
291 |   </tr>
292 |   <tr>
293 |     <td align="center"><a href="https://github.com/ArturGrigio"><img src="https://avatars.githubusercontent.com/u/6424589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Artur Grigio</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=ArturGrigio" title="Code">💻</a></td>
294 |     <td align="center"><a href="https://bhrutledge.com/"><img src="https://avatars.githubusercontent.com/u/1326704?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Brian Rutledge</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=bhrutledge" title="Code">💻</a></td>
295 |     <td align="center"><a href="https://github.com/bryanjamesmiller"><img src="https://avatars.githubusercontent.com/u/8781182?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bryan Miller</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=bryanjamesmiller" title="Code">💻</a></td>
296 |     <td align="center"><a href="https://github.com/cgs"><img src="https://avatars.githubusercontent.com/u/16057?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chris Sepic</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=cgs" title="Code">💻</a></td>
297 |     <td align="center"><a href="https://github.com/mrgix"><img src="https://avatars.githubusercontent.com/u/6233470?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dennis van Breukelen</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=mrgix" title="Code">💻</a></td>
298 |     <td align="center"><a href="https://github.com/Eoksni"><img src="https://avatars.githubusercontent.com/u/2010503?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dmitry Mazurok</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=Eoksni" title="Code">💻</a></td>
299 |     <td align="center"><a href="https://github.com/julianfox"><img src="https://avatars.githubusercontent.com/u/1648714?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Julian Renard</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=julianfox" title="Code">💻</a></td>
300 |   </tr>
301 |   <tr>
302 |     <td align="center"><a href="http://leonardoarroyo.com/"><img src="https://avatars.githubusercontent.com/u/4290407?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Leonardo Arroyo</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=leonardoarroyo" title="Code">💻</a></td>
303 |     <td align="center"><a href="https://probil.github.io/"><img src="https://avatars.githubusercontent.com/u/6773202?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Max Lyashuk</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=probil" title="Code">💻</a></td>
304 |     <td align="center"><a href="https://mgibowski.dev/"><img src="https://avatars.githubusercontent.com/u/617315?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michał Gibowski</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=mgibowski" title="Code">💻</a></td>
305 |     <td align="center"><a href="https://mickeyschwab.com/"><img src="https://avatars.githubusercontent.com/u/2643491?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mickey Schwab</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=mickeyschwab" title="Code">💻</a></td>
306 |     <td align="center"><a href="http://www.lelaboratoiredeco.fr/"><img src="https://avatars.githubusercontent.com/u/3156035?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Romain Léger</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=rleger" title="Code">💻</a></td>
307 |     <td align="center"><a href="https://skmbr.uk/"><img src="https://avatars.githubusercontent.com/u/1945312?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Simon Kimber</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=skmbr" title="Code">💻</a></td>
308 |     <td align="center"><a href="https://github.com/syffs"><img src="https://avatars.githubusercontent.com/u/4192037?v=4?s=100" width="100px;" alt=""/><br /><sub><b>syffs</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=syffs" title="Code">💻</a></td>
309 |   </tr>
310 |   <tr>
311 |     <td align="center"><a href="http://yann-bertrand.fr/"><img src="https://avatars.githubusercontent.com/u/5855339?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yann Bertrand</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=yannbertrand" title="Code">💻</a></td>
312 |     <td align="center"><a href="https://github.com/ciaasteczkowy"><img src="https://avatars.githubusercontent.com/u/509463?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ciaasteczkowy</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=ciaasteczkowy" title="Code">💻</a></td>
313 |     <td align="center"><a href="https://www.linkedin.com/in/cyril-rabaux-90141a82/"><img src="https://avatars.githubusercontent.com/u/7647886?v=4?s=100" width="100px;" alt=""/><br /><sub><b>crabaux</b></sub></a><br /><a href="https://github.com/olefirenko/vue-google-autocomplete/commits?author=crabaux" title="Code">💻</a></td>
314 |   </tr>
315 | </table>
316 | 
317 | <!-- markdownlint-restore -->
318 | <!-- prettier-ignore-end -->
319 | 
320 | <!-- ALL-CONTRIBUTORS-LIST:END -->
321 | 
322 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
323 | 


--------------------------------------------------------------------------------