RestaurantSite/src/components/shared/mapSetLocation.vue

<template>
  <div>
    <label v-if="showLocationLabel">Location</label>
    <div v-if="showAutoComplete" class="input-group-prepend">
      <span class="input-group-text">
        <eva-icon name="map" fill="#24aae1"></eva-icon>
      </span>
      <gmap-autocomplete class="form-control" @place_changed="setPlace"></gmap-autocomplete>
      <button class="btn btn-primary btn-l" @click="addMarker">Add</button>
      <br />
    </div>
    <br v-if="showAutoComplete" />
    <gmap-map v-if="showMap" :center="coordinates" :zoom="18" style="width:100%;  height: 400px;">
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :draggable="true"
        @click="center = m.position"
      ></gmap-marker>
    </gmap-map>
    <br v-if="showMap" />
  </div>
</template>

<script>
export default {
  name: "MapLocation",
  props: {
    showMap: {
      default: true,
    },
    showLocationLabel: {
      default: true,
    },
    showAutoComplete: {
      default: true,
    },
    setLocation: {
      default: {},
    },
  },
  data() {
    return {
      coordinates: {
        lat: 0,
        lng: 0,
      },
      center: { lat: 0, lng: 0 },
      markers: [],
      places: [],
      currentPlace: {},
      streetNumber: "",
      streetName: "",
      suburb: "",
      city: "",
      province: "",
      country: "",
      postalCode: "",
      url: "",
    };
  },
  created() {
    this.$getLocation({})
      .then((coord) => {
        this.coordinates = coord;
        //this.markers.push({ position: coord })
      })
      .catch((error) => alert(error));
  },

  mounted() {
    this.geolocate();
  },

  methods: {
    setPlace(place) {
      this.currentPlace = place;

      this.streetNumber = "";
      this.streetName = "";
      this.suburb = "";
      this.city = "";
      this.province = "";
      this.country = "";
      this.postalCode = "";
      this.url = "";

      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;
      }
    },
    addMarker() {
      if (this.currentPlace) {
        const marker = {
          lat: this.currentPlace.geometry.location.lat(),
          lng: this.currentPlace.geometry.location.lng(),
        };
        this.markers = [];
        this.places = [];
        this.markers.push({ position: marker });
        this.places.push(this.currentPlace);
        this.center = marker;
        this.coordinates = marker;
        this.currentPlace = null;
        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,
          coordinates: marker,
        });
      }
    },
    geolocate: function () {
      navigator.geolocation.getCurrentPosition((position) => {
        this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
      });
    },
  },
  watch: {
    setLocation: {
      immediate: true,
      handler(val, oldVal) {
        if (val && val.lat) {
          this.coordinates = val;
          this.markers = [];
          this.markers.push({ position: val });
        }
      },
    },
  },
};
</script>