Add ability to define short or long names

README.md

@@ -247,3 +247,35 @@ The example below shows the correct usage of the `types` parameter, when limitin
 >
 </vue-google-autocomplete>
 ```
+
+#### Manually setting short_name / long_name
+
+Sometimes you want to use the `short_name` instead of the `long_name` or vice-versa.
+For example in the case of `country` it is helpful to get the iso code (`short_name`) to store it in your database.
+
+You can do so by passing an object to the component.
+
+**Note:** At this moment it is only possible to pass a complete object to the component. So it's not possible to override just specific address-components.
+
+```html
+<vue-google-autocomplete
+    id="map"
+    ref="address"
+    classname="input"
+    placeholder="Start typing"
+    v-on:placechanged="getAddressData"
+    v-on:error="handleError"
+    country="sg"
+    v-bind:address-components="{
+        subpremise: 'short_name',
+        street_number: 'short_name',
+        route: 'long_name',
+        locality: 'long_name',
+        administrative_area_level_1: 'short_name',
+        administrative_area_level_2: 'long_name',
+        country: 'short_name',
+        postal_code: 'short_name',
+    }"
+>
+</vue-google-autocomplete>
+```

example/src/index.html

@@ -30,6 +30,16 @@ <h3 class="title is-4">Start typing an address and below you will see found resu
                     v-on:placechanged="getAddressData"
                     v-on:error="handleError"
                     country="sg"
+                    v-bind:address-components="{
+                        subpremise: 'short_name',
+                        street_number: 'short_name',
+                        route: 'long_name',
+                        locality: 'long_name',
+                        administrative_area_level_1: 'short_name',
+                        administrative_area_level_2: 'long_name',
+                        country: 'short_name',
+                        postal_code: 'short_name',
+                    }"
                 >
                 </vue-google-autocomplete>
             </p>

src/VueGoogleAutocomplete.vue

@@ -15,17 +15,6 @@
 </template>
 
 <script>
-    const ADDRESS_COMPONENTS = {
-        subpremise : 'short_name',
-        street_number: 'short_name',
-        route: 'long_name',
-        locality: 'long_name',
-        administrative_area_level_1: 'short_name',
-        administrative_area_level_2: 'long_name',
-        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'];
@@ -39,6 +28,63 @@
             required: true
           },
 
+          addressComponents: {
+            type: Object,
+            default: function () {
+              return  {
+                  subpremise: 'short_name',
+                  street_number: 'short_name',
+                  route: 'long_name',
+                  locality: 'long_name',
+                  administrative_area_level_1: 'short_name',
+                  administrative_area_level_2: 'long_name',
+                  country: 'long_name',
+                  postal_code: 'short_name',
+              };
+            },
+
+            subpremise: {
+              type: String,
+              requried: true
+            },
+
+            street_number: {
+              type: String,
+              requried: true
+            },
+
+            route: {
+              type: String,
+              requried: true
+            },
+
+            locality: {
+              type: String,
+              requried: true
+            },
+
+            administrative_area_level_1: {
+              type: String,
+              requried: true
+            },
+
+            administrative_area_level_2: {
+              type: String,
+              requried: true
+            },
+
+            country: {
+              type: String,
+              requried: true
+            },
+
+            postal_code: {
+              type: String,
+              requried: true
+            },
+
+          },
+
           classname: String,
 
           placeholder: {
@@ -310,8 +356,8 @@
                 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]];
+                    if (this.addressComponents[addressType]) {
+                        let val = place.address_components[i][this.addressComponents[addressType]];
                         returnData[addressType] = val;
                     }
                 }