UnivateProperties/src/components/timeshare/resort/unit/directions.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col">
        <label v-if="startAddress === null" class="uniSelectLabel" for="weekInfoRegionSelect"
          >Select</label
        >
        <select v-model="startAddress" class="form-control mb-3" @change="calcRoute()">
          <optgroup label="Cities">
            <option value="-29.087217,26.154898">Bloemfontein</option>
            <option value="-33.918861, 18.423300">Cape Town</option>
            <option value="-29.883333, 31.049999">Durban</option>
            <option value="-33.0153, 27.9116">East London</option>
            <option value="-33.977074, 22.457581">George</option>
            <option value="-26.195246, 28.034088">Johannesburg</option>
            <option value="-25.4745, 30.9703">Nelspruit</option>
            <option value="-23.9045, 29.4689">Polokwane</option>
            <option value="-33.9180, 25.5701">Port Elizabeth</option>
            <option value="-25.731340, 28.218370">Pretoria</option>
            <option value="-28.44776, 21.25612">Upington</option>
          </optgroup>

          <optgroup label="Airports">
            <option value="-26.13916667, 28.24611111">OR Tambo</option>
            <option value="-29.61444444, 31.11638889">King Shaka</option>
            <option value="-33.9843, 25.6170">Port Elizabeth</option>
            <option value="-33.96944444, 18.59722222">Cape Town</option>
          </optgroup>
        </select>
        <GmapMap
          :center="{ lat: -26.195246, lng: 28.034088 }"
          :zoom="7"
          map-type-id="terrain"
          style="width: 100%; height: 500px"
          ref="map"
        >
        </GmapMap>
        <div style="max-height:500px; overflow:auto">
          <table class="table table-sm">
            <tr>
              <td colspan="4">{{ overallRoute }}</td>
            </tr>
            <tr v-for="(direction, i) in directionSteps" :key="i">
              <td></td>
              <td>{{ i + 1 + "." }}</td>
              <td style="max-width:200px">
                <p v-html="direction.instructions" style="font-size:12px"></p>
              </td>
              <td>
                <p style="font-size:12px">{{ direction.distance.text }}</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { gmapApi } from "vue2-google-maps";
export default {
  computed: {
    google: gmapApi,
    directionsRenderer() {
      return new google.maps.DirectionsRenderer();
    }
  },
  props: {
    resortCoords: {}
  },
  data() {
    return {
      directionService: {},
      startAddress: null,
      directionSteps: [],
      overallRoute: ""
    };
  },
  methods: {
    calcRoute() {
      var resortCoords = this.resortCoords.split(",");
      var resortLatLng = new google.maps.LatLng({
        lat: parseFloat(resortCoords[1]),
        lng: parseFloat(resortCoords[0])
      });

      var startCoords = this.startAddress.split(",");
      var startLatLng = new google.maps.LatLng({
        lat: parseFloat(startCoords[0]),
        lng: parseFloat(startCoords[1])
      });

      var LatLng = new google.maps.LatLng({
        lat: -29.087217,
        lng: 26.154898
      });

      this.directionsService = new google.maps.DirectionsService();
      //   var map = this.$refs.map.$mapObject;
      //   this.directionsRenderer.setMap(map);
      //   var start = document.getElementById("start").value;
      var end = "joplin, mo";
      var request = {
        origin: startLatLng,
        destination: resortLatLng,
        travelMode: "DRIVING"
      };

      this.directionsService.route(request, (result, status) => {
        if (status == "OK") {
          this.directionSteps = result.routes[0].legs[0].steps;
          console.log(result.routes[0].legs[0]);
          this.overallRoute =
            result.routes[0].legs[0].distance.text +
            ". About " +
            result.routes[0].legs[0].duration.text;

          this.directionsRenderer.setMap(this.$refs.map.$mapObject);

          this.directionsRenderer.setDirections(result);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.uniSelectLabel {
  position: absolute;
  z-index: 2;
  margin-left: 15px;
  margin-top: 7px;
  font-family: "muli";
  font-size: 15px;
  color: rgb(118, 118, 118);
}
</style>