UnivateProperties/src/components/property/mapSection.vue

<template>
  <div>
    <gmap-autocomplete class="form-control mb-3 uniInput" @place_changed="setPlace">*</gmap-autocomplete>
    <GmapMap
      :center="mapCenter"
      :zoom="mapZoom"
      map-type-id="terrain"
      style="width: 100%; height: 500px"
      ref="map"
    >
      <GmapMarker v-if="this.place" :position="mapCenter" :clickable="true" :draggable="false" />
    </GmapMap>
  </div>
</template>

<script>
/* eslint-disable */
import { gmapApi } from "vue2-google-maps";
export default {
  computed: {
    google: gmapApi,
  },
  data() {
    return {
      place: null,
      mapCenter: { lat: -26.195246, lng: 28.034088 },
      mapZoom: 11,
      streetNumber: "",
      streetName: "",
      suburb: "",
      city: "",
      province: "",
      country: "",
      postalCode: "",
      url: "",
      coords: {},
    };
  },

  methods: {
    setPlace(place) {
      this.place = place;
      this.mapCenter = place.geometry.location;
      this.mapZoom = 17;

      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;
      }

      var coords =
        place.geometry.viewport.Za.j + "," + place.geometry.viewport.Va.j;
      this.coords = coords;

      this.$emit("map-location", {
        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>

<style lang="scss" scoped></style>