current location

package.json

     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@ionic-native/geolocation": "^5.36.0",
     "@ionic-native/http": "^5.36.0",
+    "@ionic-native/native-geocoder": "^5.36.0",
     "@ionic/angular": "^5.5.2",
-    "cordova-android": "9.1.0",
-    "cordova-ios": "6.2.0",
+    "cordova-android": "^4.1.1",
+    "cordova-ios": "^4.0.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "4.16.1",
     "@typescript-eslint/parser": "4.16.1",
+    "cordova-plugin-add-swift-support": "^1.7.2",
     "cordova-plugin-device": "2.0.2",
+    "cordova-plugin-geolocation": "^4.1.0",
+    "cordova-plugin-googlemaps": "^2.7.1",
     "cordova-plugin-ionic-keyboard": "^2.0.5",
     "cordova-plugin-ionic-webview": "^4.0.0",
+    "cordova-plugin-nativegeocoder": "^3.4.1",
     "cordova-plugin-splashscreen": "5.0.2",
     "cordova-plugin-statusbar": "2.4.2",
     "cordova-plugin-whitelist": "^1.3.3",
       "cordova-plugin-device": {},
       "cordova-plugin-splashscreen": {},
       "cordova-plugin-ionic-webview": {},
-      "cordova-plugin-ionic-keyboard": {}
+      "cordova-plugin-ionic-keyboard": {},
+      "cordova-plugin-geolocation": {
+        "GPS_REQUIRED": "true"
+      },
+      "cordova-plugin-nativegeocoder": {
+        "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
+      }
     },
     "platforms": [
       "ios",
       "android"
     ]
   }
-}
+}

src/app/app.module.ts

 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';
+
 // library.add(fas,far,fab);
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [HttpClientModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule],
-  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
+  providers: [
+    Geolocation,
+    NativeGeocoder,
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {

src/app/home/home.page.html

       </ion-col>
     </ion-row>
   </ion-grid>
+  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+    <ion-fab-button>
+      <ion-icon :icon="camera"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>

src/app/place/place.page.html

 <ion-header>
   <ion-toolbar class="new-background-color">
+    <ion-buttons slot="start" color="light">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>Wellness Route</ion-title>
   </ion-toolbar>
 </ion-header>

src/app/placedetail/placedetail.page.html

 </ion-header>
 
 <ion-content>
-  <div *ngIf="placelist?.better_featured_image != null" >
+  <div *ngIf="placelist?.better_featured_image != null">
     <img src="{{placelist?.better_featured_image.source_url}}">
   </div>
   <div *ngIf="placelist?.better_featured_image == null" class="asd">
         <div>{{ placelist?.acf.openclose }}</div>
       </ion-col>
       <ion-col size="12">
+        {{ placelist?.acf.gmap.address }}
+        {{ placelist?.acf.gmap.lat }}
+        {{ placelist?.acf.gmap.lng }}
         <img src="/assets/images/map-temp.jpg" alt="">
       </ion-col>
-      <ion-col size="12">        
+      <ion-col size="12">
         <ion-row>
           <ion-col size="4" class="ion-text-center">
             <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
-            <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>              
+            <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>
           </ion-col>
           <ion-col size="4" class="ion-text-center">
             <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
-            <fa-icon [icon]="['fas', 'map-marked-alt']" size="2x"></fa-icon> 
+            <fa-icon [icon]="['fas', 'map-marked-alt']" size="2x"></fa-icon>
           </ion-col>
           <ion-col size="4" class="ion-text-center">
             <!-- <div [innerHTML]="placelist?.acf.email"></div>             -->
-            <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>              
+            <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
           </ion-col>
         </ion-row>
       </ion-col>
         <div [innerHTML]="placelist?.acf.address"></div>
       </ion-col>
       <ion-col size="12">
-        <div class="txt-lead">รายละเอียด</div>
-        <div [innerHTML]="placelist?.content.rendered"></div>
+        <!-- <div class="txt-lead">รายละเอียด</div>
+        <div [innerHTML]="placelist?.content.rendered"></div> -->
         <!-- <div>{{placelist?.content.rendered}}</div> -->
+        <!-- <ion-button (click)="loadMap()" shape="round" color="dark">
+          <ion-icon slot="start" name="locate"></ion-icon>
+          Where I Am
+        </ion-button> -->
+        <div class="map-wrapper">
+          <div id="map_center">
+            <img src="assets/icon/location-marker.png" />
+          </div>
+          <div #map id="map"></div>
+        </div>
+        
       </ion-col>
     </ion-row>
+
   </ion-grid>
 </ion-content>

src/app/placedetail/placedetail.page.scss

 //     position: absolute;
 // }
 
-  
-.bg{
+.bg {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100vw;
+  height: 60vh;
+  .holidaycard {
     position: absolute;
     left: 0px;
-    top: 0px;
-    width: 100vw;
-    height: 60vh;
-    .holidaycard {
-        position: absolute;
-        left: 0px;
-        bottom: 0px;
-        min-height: 60%;
-        width: 100%;
-        padding: 10px;
-        border-radius: 25px ;
-        background: white;
-        --background: white;
-    }
+    bottom: 0px;
+    min-height: 60%;
+    width: 100%;
+    padding: 10px;
+    border-radius: 25px;
+    background: white;
+    --background: white;
+  }
 }
 
 .asd {
+}
+
+.asd .country {
+  position: absolute;
+  top: 50px;
+  width: 140px;
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+  color: white;
+}
+
+#map_canvas {
+  width: 90%;
+  height: 80%;
+  border: 1px solid red;
+}
+
+#address {
+  padding: 10px;
+  font-size: 18px;
+  font-weight: bold;
+}
 
+#map {
+  width: 100%;
+  height: 20vh;
 }
 
-.asd .country{
+.map-wrapper {
+  position: relative;
+
+  #map_center {
     position: absolute;
-    top: 50px;
-    width: 140px;
-    padding-left: 10px !important;
-    padding-right: 10px !important;
-    color: white;
+    z-index: 99;
+    height: 40px;
+    width: 40px;
+    top: 50%;
+    left: 50%;
+    margin-left: -21px;
+    margin-top: -41px;
+  }
 }

src/app/placedetail/placedetail.page.ts

-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { WpServiceService } from '../wp-service.service';
 
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
+
+declare var google;
+
 @Component({
   selector: 'app-placedetail',
   templateUrl: './placedetail.page.html',
   data: any;
   placelist: any;
 
-  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router) { }
+  @ViewChild('map', { static: false }) mapElement: ElementRef;
+  map: any;
+  address: string;
+  latitude: number;
+  longitude: number;
+  latdynamic: any;
+  londynamic: any;
+  
+
+  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router, private geolocation: Geolocation, private nativeGeocoder: NativeGeocoder) { }
   @Input() id: string;
   showDiss = false;
 
     if (this.id != undefined) {
       this.showDiss = true;
     }
+    this.loadMap();
     // console.log("showDiss ", this.showDiss);
     // let id = this.route.snapshot.paramMap.get('id') || this.id;
     // console.log("fetching ...");
     // this.wpservice.getPlaceDetail(id).subscribe(data => {
-      // let post = JSON.parse(data.data);
-      // console.log(" get data ", post);
-      // post['media_url'] = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
-      // this.data = post;
+    // let post = JSON.parse(data.data);
+    // console.log(" get data ", post);
+    // post['media_url'] = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
+    // this.data = post;
     let id = this.route.snapshot.paramMap.get('id') || this.id;
     console.log("fetching ...");
     this.wpservice.getPlaceDetail(id).subscribe((data) => {
-      this.placelist = data;      
+      this.placelist = data;
+      this.latdynamic = data['acf']['gmap']['lat'];
+      this.londynamic = data['acf']['gmap']['lng'];
       console.log("load Place Detail ...");
+      console.log(this.latdynamic);
+      console.log("load Lati ...");
+      console.log(this.londynamic);
+      console.log("load Lon ...");
       console.log(data);
     }, error => {
       console.log("errror ", error);
     });
   }
 
+  loadMap() {
+    this.geolocation.getCurrentPosition().then((resp) => {
+
+      this.latitude = resp.coords.latitude;
+      this.longitude = resp.coords.longitude;
+      // this.latdynamic = resp.coords.latitude;
+      // this.londynamic = resp.coords.longitude;
+
+      let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
+      let mapOptions = {
+        center: latLng,
+        zoom: 15,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      }
+
+      this.getAddressFromCoords(resp.coords.latitude, resp.coords.longitude);
+
+      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
+
+      this.map.addListener('dragend', () => {
+
+        this.latitude = this.map.center.lat();
+        this.longitude = this.map.center.lng();
+
+        this.getAddressFromCoords(this.map.center.lat(), this.map.center.lng())
+      });
+
+    }).catch((error) => {
+      console.log('Error getting location', error);
+    });
+  }
+
+  getAddressFromCoords(lattitude, longitude) {
+    console.log("getAddressFromCoords " + lattitude + " " + longitude);
+    let options: NativeGeocoderOptions = {
+      useLocale: true,
+      maxResults: 5
+    };
+
+    this.nativeGeocoder.reverseGeocode(lattitude, longitude, options)
+      .then((result: NativeGeocoderResult[]) => {
+        this.address = "";
+        let responseAddress = [];
+        for (let [key, value] of Object.entries(result[0])) {
+          if (value.length > 0)
+            responseAddress.push(value);
+
+        }
+        responseAddress.reverse();
+        for (let value of responseAddress) {
+          this.address += value + ", ";
+        }
+        this.address = this.address.slice(0, -2);
+      })
+      .catch((error: any) => {
+        this.address = "Address Not Available!";
+      });
+
+  }
+
+  // getAddressFromCoords2(lattitude, longitude) {
+  //   console.log("getAddressFromCoords2 " + lattitude + " " + longitude);
+  //   let options: NativeGeocoderOptions = {
+  //     useLocale: true,
+  //     maxResults: 5
+  //   };
+  // }
+
+  // getGeoencoder(latitude, longitude) {
+  //   this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
+  //     .then((result: NativeGeocoderResult[]) => {
+  //       this.address = this.generateAddress(result[0]);
+  //     })
+  //     .catch((error: any) => {
+  //       alert('Error getting location' + JSON.stringify(error));
+  //     });
+  // }
 }

src/app/province/province.page.scss

-// .bg {
-//   position: absolute;
-//   left: 0px;
-//   top: 0px;
-//   width: 100vw;
-//   height: 100vh;
-//   .holidaycard {
-//     position: absolute;
-//     left: 0px;
-//     bottom: 0px;
-//     min-height: 60%;
-//     width: 100%;
-//     padding: 10px;
-//     border-radius: 25px;
-//     background: white;
-//     --background: white;
-//   }
-// }
+
 .holidaycard {
   position: absolute;
   left: 0px;

src/index.html

   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHSbJHYItlRqJeZ737ju4weBHlarJIPGE"></script>
 </head>
 
 <body>