Google map on buy page

package-lock.json

         "randomfill": "^1.0.3"
       }
     },
-    "css": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
-      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
-      "requires": {
-        "inherits": "^2.0.3",
-        "source-map": "^0.6.1",
-        "source-map-resolve": "^0.5.2",
-        "urix": "^0.1.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
         }
       }
     },
-    "css-parse": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz",
-      "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
-      "requires": {
-        "css": "^2.0.0"
-      }
-    },
     "css-select": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
       "dev": true
     },
-    "object-path": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.4.tgz",
-      "integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk="
-    },
     "object-visit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true
     },
     "schema-utils": {
       "version": "0.4.7",
         }
       }
     },
-    "stylus": {
-      "version": "0.54.7",
-      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.7.tgz",
-      "integrity": "sha512-Yw3WMTzVwevT6ZTrLCYNHAFmanMxdylelL3hkWNgPMeTCpMwpV3nXjpOHuBXtFv7aiO2xRuQS6OoAdgkNcSNug==",
-      "requires": {
-        "css-parse": "~2.0.0",
-        "debug": "~3.1.0",
-        "glob": "^7.1.3",
-        "mkdirp": "~0.5.x",
-        "safer-buffer": "^2.1.2",
-        "sax": "~1.2.4",
-        "semver": "^6.0.0",
-        "source-map": "^0.7.3"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
-        },
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
-        }
-      }
-    },
     "stylus-loader": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz",

package.json

     "vue-cli-plugin-vuetify": "^0.5.0",
     "vue-template-compiler": "^2.6.10"
   }
-}
+}

src/components/timeshare/buy/buyPage.vue

     </section>
     <div class="container">
       <div class="row">
-        <div class="col-md-8 offset-md-0">
-          <div class="row">
-            <div class="col-md-8" style="text-align:left;">
-              <p>
-                The resorts have been listed in their relevant provinces.
-                Please select the resort for which you would like to view
-                the available weeks and then select the weeks that interest
-                you on the resort page.
-              </p>
-              <p>
-                Arrival and departure dates are indicated but please note
-                that these dates may vary annually.
-              </p>
-              <p>
-                As with any property related sale, upon purchasing the holiday
-                of your choice, there will be a transfer fee payable for the
-                change of ownership. This fee will depend on the relevant resort
-                or managing agent.
-              </p>
-            </div>
-          </div>
+        <div class="col-md-12 text-left">
+          <p>
+            The resorts have been listed in their relevant provinces.
+            Please select the resort for which you would like to view
+            the available weeks and then select the weeks that interest
+            you on the resort page.
+          </p>
+          <p>
+            Arrival and departure dates are indicated but please note
+            that these dates may vary annually.
+          </p>
+          <p>
+            As with any property related sale, upon purchasing the holiday
+            of your choice, there will be a transfer fee payable for the
+            change of ownership. This fee will depend on the relevant resort
+            or managing agent.
+          </p>
+        </div>
+      </div>
 
-          <div class="row mb-4">
-            <div class="col-md-8">
-              <div class="accordion" id="accordionExample">
-                <div class="card" v-for="(region, r) in regions" :key="r">
-                  <a
-                    class="btn btn-b-n"
-                    type="button"
-                    data-toggle="collapse"
-                    :data-target="'#collapse' + region.id"
-                    aria-expanded="false"
-                    :aria-controls="'collapse' + region.id"
-                  >
-                    <div :id="'header' + region.id">
-                      <h5 class="mb-0">{{ region.regionName }}</h5>
-                    </div>
-                  </a>
-                  <div
-                    :id="'collapse' + region.id"
-                    class="collapse"
-                    :aria-labelledby="'header' + region.id"
-                    data-parent="#accordionExample"
-                  >
-                    <div class="card-body">
-                      <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
-                        <a
-                          class="cursor-pointer"
-                          href="#"
-                          @click="routerGoTo('/resort/' + resort.resortCode)"
-                        >{{resort.resortName}}</a>
-                        <br />
-                      </p>
-                    </div>
-                  </div>
+      <div class="row mb-4">
+        <div class="col-md-4">
+          <div class="accordion" id="accordionExample">
+            <div class="card" v-for="(region, r) in regions" :key="r">
+              <a
+                class="btn btn-b-n"
+                type="button"
+                data-toggle="collapse"
+                :data-target="'#collapse' + region.id"
+                aria-expanded="false"
+                :aria-controls="'collapse' + region.id"
+              >
+                <div :id="'header' + region.id">
+                  <h5 class="mb-0">{{ region.regionName }}</h5>
+                </div>
+              </a>
+              <div
+                :id="'collapse' + region.id"
+                class="collapse"
+                :aria-labelledby="'header' + region.id"
+                data-parent="#accordionExample"
+              >
+                <div class="card-body">
+                  <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
+                    <a
+                      class="cursor-pointer"
+                      href="#"
+                      @click="routerGoTo('/resort/' + resort.resortCode)"
+                      @mouseover="getResort(resort.resortCode)"
+                    >{{resort.resortName}}</a>
+                    <br />
+                  </p>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <div class="col-md-8">
+          <div class="tab-content" id="myTabContent">
+            <div
+              class="tab-pane fade show active"
+              id="directions"
+              role="tabpanel"
+              aria-labelledby="directions-tab"
+            >
+              <iframe
+                :src="mapUrl"
+                width="100%"
+                height="450"
+                frameborder="0"
+                style="border:0"
+                allowfullscreen
+              ></iframe>
+              <br />
+
+              <small>
+                <a
+                  :href="mapUrl"
+                  style="color:#60CBEB;text-align:left"
+                  target="_blank"
+                >See map bigger</a>
+              </small>
+            </div>
+            <div
+              class="tab-pane fade"
+              id="resort-layout"
+              role="tabpanel"
+              aria-labelledby="resort-layout-tab"
+            >
+              <img class="img-fluid" :src="layout" alt="Resort Layout" />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
     this.getRegions();
   },
   computed: {
-    ...mapState('timeshareBuy', ['detailedRegion']),
+    ...mapState('timeshareBuy', ['detailedRegion', 'resort']),
+    mapUrl() {
+      return (
+        'http://maps.google.com/maps?q='
+        + this.resort.prLatitude
+        + ', '
+        + this.resort.prLongitude
+        + '&z=15&output=embed'
+      );
+    },
     regions() {
       return _.sortBy(this.detailedRegion, r => r.regionName);
     },
   },
   methods: {
-    ...mapActions('timeshareBuy', ['getRegions']),
+    ...mapActions('timeshareBuy', ['getRegions', 'getResort']),
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
+    updateMap(resortCode) {
+      this.getGPS(resortCode);
+      alert(resortCode);
+    },
   },
 };
 </script>

src/store/modules/timeshare/buyPage.js

 /* eslint-disable guard-for-in */
 import axios from 'axios';
 import _ from 'lodash';
+import resort from './resort';
 
 export default {
   namespaced: true,
   state: {
     regions: [],
     detailedRegion: [],
+    resort: {},
   },
   mutations: {
     setRegions(state, regions) {
     addDetailed(state, detailed) {
       state.detailedRegion.push(detailed);
     },
+    setResort(state, resort) {
+      state.resort = resort;
+    },
   },
   getters: {},
   actions: {
         })
         .catch(console.error);
     },
+    getResort({
+      commit,
+    }, resortCode) {
+      axios.get(
+        `https://www.tradeunipoint.com/unibackend/seam/resource/rest/products/TRESORT/${
+          resortCode}`,
+      )
+        .then((result) => {
+          commit('setResort', result.data);
+        })
+        .catch(console.error);
+    },
     getDetailedRegion({
       commit,
     }, region) {