UnivateProperties/src/components/property/mapSection.vue

<template>
  <div>
    <gmap-autocomplete
      class="form-control mb-3 uniInput"
      @place_changed="setPlace"
      :disabled="!canEdit"
    >*</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"
        :disabled="!canEdit"
      />
    </GmapMap>
  </div>
</template>

<script>
/* eslint-disable */
import { gmapApi } from "vue2-google-maps";
export default {
  computed: {
    google: gmapApi,
  },
  props: {
    savedCoords: { default: "" },
    canEdit: { default: true },
  },
  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;
      }

      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,
      });
    },
  },
  watch: {
    savedCoords: {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          var array = val.split(",");
          this.mapCenter = {
            lat: Number(array[0]),
            lng: Number(array[1]),
          };
          this.mapZoom = 17;
        }
      },
    },
  },
};
</script>

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