Added provinces to map

src/components/timeshare/buy/buyPage.vue

@@ -46,7 +46,10 @@
                 :aria-controls="'collapse' + region.id"
               >
                 <div :id="'header' + region.id">
-                  <h5 class="mb-0">{{ region.regionName }}</h5>
+                  <h5
+                    class="mb-0"
+                    @mouseover="updateMapProvince(region.regionName)"
+                  >{{ region.regionName }}</h5>
                 </div>
               </a>
               <div
@@ -61,7 +64,7 @@
                       class="cursor-pointer"
                       href="#"
                       @click="routerGoTo('/resort/' + resort.resortCode)"
-                      @mouseover="getResort(resort.resortCode)"
+                      @mouseover="updateMap(resort.resortCode)"
                     >{{resort.resortName}}</a>
                     <br />
                   </p>
@@ -115,13 +118,20 @@ import { mapState, mapActions } from 'vuex';
 
 export default {
   name: 'TimeshareToBuy',
+  data() {
+    return {
+      myMap: 'SouthAfrica',
+      myZoom: 5,
+    };
+  },
   mounted() {
     this.getRegions();
   },
   computed: {
     ...mapState('timeshareBuy', ['detailedRegion', 'resort']),
     mapUrl() {
-      return `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=15&output=embed`;
+      // return 'http://maps.google.com/maps/place/Gauteng/';
+      return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
     },
     regions() {
       return _.sortBy(this.detailedRegion, r => r.regionName);
@@ -133,8 +143,15 @@ export default {
       this.$router.push(goTo);
     },
     updateMap(resortCode) {
-      this.getGPS(resortCode);
-      alert(resortCode);
+      this.myMap = 'SouthAfrice';
+      this.getResort(resortCode);
+      // `http://maps.google.com/maps?q=${this.resort.prLatitude},${this.resort.prLongitude}&z=7&output=embed`;
+      this.myMap = `${this.resort.prLatitude},${this.resort.prLongitude}`;
+      this.myZoom = 10;
+    },
+    updateMapProvince(province) {
+      this.myMap = province.replace(/\s/g, '');
+      this.myZoom = 7;
     },
   },
 };