feat: handle input coordinates and current location (olefirenko#64)

* feat(geolocation): added exposed geolocate method to navigator location

* refactor(geolocation): flow is now more modular to handle input coordinates

* fix: types needs to be set for filtering

Author: syffs

README.md

@@ -108,6 +108,12 @@ Default: `false`
 
 Bias the search towards user current location.
 
+#### geolocationOptions
+Type: [`Object`](https://developer.mozilla.org/fr/docs/Web/API/PositionOptions)
+Default: `{}`
+
+Allow to configure Options for [`navigator.getCurrentPosition`](https://developer.mozilla.org/fr/docs/Web/API/Geolocation/getCurrentPosition)
+
 ### Events
 The component emits next events, which you can listen in your application:
 
@@ -136,6 +142,10 @@ Gets triggered when the autocomplete results got changed
 #### keypress
 Gets triggered when a key gets pressed
 
+#### error
+Gets triggered when an error is encountered
+
+
 ### Exposed component functions
 
 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.
@@ -156,6 +166,14 @@ Call blur to blur (unfocus) the element
 
 Call to update the user input with a new value
 
+#### updateCoordinates([latlng](https://developers.google.com/maps/documentation/javascript/reference#LatLng))
+
+Call to force coordinates and update the input accordingly
+
+#### geolocate()
+
+Call to retrieve current position from `navigator` and update the input accordingly
+
 
 ### Example
 

example/src/index.html

@@ -18,10 +18,13 @@ <h2 class="subtitle">A Vue.js autosuggest component for the Google Maps Places A
 <section class="hero">
     <div class="hero-body">
         <div class="container" id="app">
-            <h3 class="title is-4">Start typing an address and below you will see found result</h3>
+            <h3 class="title is-4">Start typing an address and below you will see found result,
+                <a v-on:click="$refs.address.geolocate()">or force current location</a>
+            </h3>
             <p class="control">
                 <vue-google-autocomplete
                     id="map"
+                    ref="address"
                     classname="input"
                     placeholder="Start typing"
                     v-on:placechanged="getAddressData"

src/VueGoogleAutocomplete.vue

@@ -15,6 +15,20 @@
 </template>
 
 <script>
+    const ADDRESS_COMPONENTS = {
+        street_number: 'short_name',
+        route: 'long_name',
+        locality: 'long_name',
+        administrative_area_level_1: 'short_name',
+        administrative_area_level_2: 'county',
+        country: 'long_name',
+        postal_code: 'short_name'
+    };
+
+    const CITIES_TYPE = ['locality', 'administrative_area_level_3'];
+    const REGIONS_TYPE = ['locality', 'sublocality', 'postal_code', 'country',
+        'administrative_area_level_1', 'administrative_area_level_2'];
+
     export default {
         name: 'VueGoogleAutocomplete',
 
@@ -44,6 +58,11 @@
           enableGeolocation: {
             type: Boolean,
             default: false
+          },
+
+          geolocationOptions: {
+            type: Object,
+            default: null
           }
         },
 
@@ -62,6 +81,29 @@
                  * @type {String}
                  */
                 autocompleteText: '',
+
+                geolocation: {
+                    /**
+                     * Google Geocoder Objet
+                     * @type {Geocoder}
+                     * @link https://developers.google.com/maps/documentation/javascript/reference#Geocoder
+                     */
+                    geocoder: null,
+
+                    /**
+                     * Filled after geolocate result
+                     * @type {Coordinates}
+                     * @link https://developer.mozilla.org/en-US/docs/Web/API/Coordinates
+                     */
+                    loc: null,
+
+                    /**
+                     * Filled after geolocate result
+                     * @type {Position}
+                     * @link https://developer.mozilla.org/en-US/docs/Web/API/Position
+                     */
+                    position: null
+                }
             }
         },
 
@@ -94,8 +136,14 @@
                 options
             );
 
-          this.autocomplete.addListener('place_changed', () => {
+          this.autocomplete.addListener('place_changed', this.onPlaceChanged);
+        },
 
+        methods: {
+            /**
+             * When a place changed
+             */
+            onPlaceChanged() {
                 let place = this.autocomplete.getPlace();
 
                 if (!place.geometry) {
@@ -105,48 +153,21 @@
                   return;
                 }
 
-                let addressComponents = {
-                    street_number: 'short_name',
-                    route: 'long_name',
-                    locality: 'long_name',
-                    administrative_area_level_1: 'short_name',
-                    administrative_area_level_2: 'county',
-                    country: 'long_name',
-                    postal_code: 'short_name'
-                };
-
-                let returnData = {};
-
                 if (place.address_components !== undefined) {
-                    // Get each component of the address from the place details
-                    for (let i = 0; i < place.address_components.length; i++) {
-                      let addressType = place.address_components[i].types[0];
-
-                      if (addressComponents[addressType]) {
-                        let val = place.address_components[i][addressComponents[addressType]];
-                            returnData[addressType] = val;
-                      }
-                    }
-
-                    returnData['latitude'] = place.geometry.location.lat();
-                    returnData['longitude'] = place.geometry.location.lng();
-
                     // return returnData object and PlaceResult object
-                    this.$emit('placechanged', returnData, place, this.id);
+                    this.$emit('placechanged', this.formatResult(place), place, this.id);
 
                     // update autocompleteText then emit change event
                     this.autocompleteText = document.getElementById(this.id).value
                     this.onChange()
                 }
-           });
-        },
+            },
 
-        methods: {
             /**
              * When the input gets focus
              */
             onFocus() {
-              this.geolocate();
+              this.biasAutocompleteLocation();
               this.$emit('focus');
             },
 
@@ -209,24 +230,119 @@
               this.autocompleteText = value
             },
 
+            /**
+             * Update the coordinates of the input
+             * @param  {Coordinates} value
+             */
+            updateCoordinates (value) {
+                if (!value && !(value.lat || value.lng)) return;
+                if (!this.geolocation.geocoder) this.geolocation.geocoder = new google.maps.Geocoder();
+                this.geolocation.geocoder.geocode({'location': value}, (results, status) => {
+                    if (status === 'OK') {
+                        results = this.filterGeocodeResultTypes(results);
+                        if (results[0]) {
+                            this.$emit('placechanged', this.formatResult(results[0]), results[0], this.id);
+                            this.update(results[0].formatted_address);
+                        } else {
+                            this.$emit('error', 'no result for provided coordinates');
+                        }
+                    } else {
+                        this.$emit('error', 'error getting address from coords');
+                    }
+                })
+            },
+
+            /**
+             * Update location based on navigator geolocation
+             */
+            geolocate () {
+                this.updateGeolocation ((geolocation, position) => {
+                    this.updateCoordinates(geolocation)
+                })
+            },
+
+            /**
+             * Update internal location from navigator geolocation
+             * @param  {Function} (geolocation, position)
+             */
+            updateGeolocation (callback = null) {
+                if (navigator.geolocation) {
+                    let options = {};
+                    if(this.geolocationOptions) Object.assign(options, this.geolocationOptions);
+                    navigator.geolocation.getCurrentPosition(position => {
+                        let geolocation = {
+                            lat: position.coords.latitude,
+                            lng: position.coords.longitude
+                        };
+                        this.geolocation.loc = geolocation;
+                        this.geolocation.position = position;
+
+                        if (callback) callback(geolocation, position);
+                    }, err => {
+                        this.$emit('error', 'Cannot get Coordinates from navigator', err);
+                    }, options);
+                }
+            },
+
+
             // Bias the autocomplete object to the user's geographical location,
             // as supplied by the browser's 'navigator.geolocation' object.
-            geolocate() {
+            biasAutocompleteLocation () {
                 if (this.enableGeolocation) {
-                    if (navigator.geolocation) {
-                      navigator.geolocation.getCurrentPosition(position => {
-                        let geolocation = {
-                          lat: position.coords.latitude,
-                          lng: position.coords.longitude
-                        };
+                    this.updateGeolocation((geolocation, position) => {
                         let circle = new google.maps.Circle({
-                          center: geolocation,
-                          radius: position.coords.accuracy
+                            center: geolocation,
+                            radius: position.coords.accuracy
                         });
                         this.autocomplete.setBounds(circle.getBounds());
-                      });
+                    })
+                }
+            },
+
+            /**
+             * Format result from Geo google APIs
+             * @param place
+             * @returns {{formatted output}}
+             */
+            formatResult (place) {
+                let returnData = {};
+                for (let i = 0; i < place.address_components.length; i++) {
+                    let addressType = place.address_components[i].types[0];
+
+                    if (ADDRESS_COMPONENTS[addressType]) {
+                        let val = place.address_components[i][ADDRESS_COMPONENTS[addressType]];
+                        returnData[addressType] = val;
+                    }
+                }
+
+                returnData['latitude'] = place.geometry.location.lat();
+                returnData['longitude'] = place.geometry.location.lng();
+                return returnData
+            },
+
+            /**
+             * Extract configured types out of raw result as
+             * Geocode API does not allow to do it
+             * @param results
+             * @returns {GeocoderResult}
+             * @link https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult
+             */
+            filterGeocodeResultTypes (results) {
+                if (!results || !this.types) return results;
+                let output = [];
+                let types = [this.types];
+                if (types.includes('(cities)')) types = types.concat(CITIES_TYPE);
+                if (types.includes('(regions)')) types = types.concat(REGIONS_TYPE);
+
+                for (let r of results) {
+                    for (let t of r.types) {
+                        if (types.includes(t)) {
+                            output.push(r);
+                            break;
+                        }
                     }
                 }
+                return output;
             }
         }
     }

test/helpers/google_stub.js

@@ -6,6 +6,11 @@ export default function googleStub() {
             return {
               addListener: function () { }
             }
+          },
+          Geocoder: function () {
+            return {
+              geocode: function () { }
+            }
           }
         },
       }