UnivateProperties/src/components/shared/addressAutoComplete.vue

<template>
  <div>
    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace"></gmap-autocomplete>
  </div>
</template>

<script>
export default {
  name: "AddressAutoComplete",
  props: {
    placeholder: {
      default: "ENTER LOCATION",
    },
  },
  data() {
    return {
      streetNumber: "",
      streetName: "",
      suburb: "",
      city: "",
      province: "",
      country: "",
      postalCode: "",
      url: "",
      coords: {},
    };
  },
  methods: {
    setPlace(place) {
      this.streetNumber = "";
      this.streetName = "";
      this.suburb = "";
      this.city = "";
      this.province = "";
      this.country = "";
      this.postalCode = "";
      this.url = "";
      this.coords = {};
      for (let i = 0; i < place.address_components.length; i++) {
        if (place.address_components[i].types[0] === "street_number") {
          this.streetNumber = place.address_components[i].long_name;
        }
        if (place.address_components[i].types[0] === "route") {
          this.streetName = place.address_components[i].long_name;
        }
        if (place.address_components[i].types[0] === "sublocality_level_1") {
          this.suburb = place.address_components[i].long_name;
        }
        if (place.address_components[i].types[0] === "locality") {
          this.city = place.address_components[i].long_name;
        }
        if (
          place.address_components[i].types[0] === "administrative_area_level_1"
        ) {
          this.province = place.address_components[i].long_name;
        }
        if (place.address_components[i].types[0] === "country") {
          this.country = place.address_components[i].long_name;
        }
        if (place.address_components[i].types[0] === "postal_code") {
          this.postalCode = place.address_components[i].long_name;
        }
      }
      this.url = place.url;
      this.coords = place.geometry.location;
      this.$emit("GoogleAddress", {
        streetNumber: this.streetNumber,
        streetName: this.streetName,
        suburb: this.suburb,
        city: this.city,
        province: this.province,
        country: this.country,
        postalCode: this.postalCode,
        url: this.url,
        coords: this.coords,
      });
    },
  },
};
</script>