package lock

package.json

@@ -26,9 +26,10 @@
     "@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",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
@@ -50,9 +51,14 @@
     "@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-googlemaps-sdk": "github:mapsplugin/cordova-plugin-googlemaps-sdk",
     "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",
@@ -80,11 +86,16 @@
       "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"
+      "ios"
     ]
   }
 }

src/app/app-routing.module.ts

@@ -45,6 +45,14 @@ const routes: Routes = [
   {
     path: 'province',
     loadChildren: () => import('./province/province.module').then( m => m.ProvincePageModule)
+  },
+  {
+    path: 'gmap',
+    loadChildren: () => import('./gmap/gmap.module').then( m => m.GmapPageModule)
+  },
+  {
+    path: 'nearme',
+    loadChildren: () => import('./nearme/nearme.module').then( m => m.NearmePageModule)
   }
 ];
 @NgModule({

src/app/app.module.ts

@@ -16,13 +16,20 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 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/gmap/gmap-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GmapPage } from './gmap.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GmapPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GmapPageRoutingModule {}

src/app/gmap/gmap.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GmapPageRoutingModule } from './gmap-routing.module';
+
+import { GmapPage } from './gmap.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    GmapPageRoutingModule
+  ],
+  declarations: [GmapPage]
+})
+export class GmapPageModule {}

src/app/gmap/gmap.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>gmap</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>..
+<div #map id="map"></div>
+</ion-content>

src/app/gmap/gmap.page.scss

@@ -0,0 +1,3 @@
+#map {
+    height: 300px;
+}

src/app/gmap/gmap.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GmapPage } from './gmap.page';
+
+describe('GmapPage', () => {
+  let component: GmapPage;
+  let fixture: ComponentFixture<GmapPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GmapPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GmapPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/gmap/gmap.page.ts

@@ -0,0 +1,72 @@
+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: any;
+
+@Component({
+  selector: 'app-gmap',
+  templateUrl: './gmap.page.html',
+  styleUrls: ['./gmap.page.scss'],
+})
+export class GmapPage implements OnInit {
+  @Input() id: string;
+  data: any;
+  placelist: any;
+  latdynamic: any;
+  londynamic: any;
+  xxx: any;
+  yyy: any;
+  placeL: any;
+  map: any;
+  // @ViewChild('map', { static: false }) mapElement: ElementRef;
+  @ViewChild('map', { static: true }) mapRef: ElementRef;
+  // @ViewChild('map', { static: false }) mapElement: ElementRef;
+
+
+  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router, private geolocation: Geolocation) { }
+
+  ngOnInit() {
+    this.showMap();
+    // this.loadMap() 
+    let id = this.route.snapshot.paramMap.get('id') || this.id;
+    this.wpservice.getPlaceDetail(173).subscribe((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);
+      let xxx = this.londynamic;
+      const yyy = this.latdynamic;
+    }, error => {
+      console.log("errror ", error);
+    });
+
+    let watch = this.geolocation.watchPosition();
+    watch.subscribe((data) => {
+      // data can be a set of coordinates, or an error (if an error occurred).
+      // data.coords.latitude
+      // data.coords.longitude
+      console.log(data);
+    });
+  }
+
+  showMap() {
+    let location = new google.maps.LatLng(13.7643439, 100.6899729);
+    let options = {
+      center: location,
+      zoom: 15,
+      disableDefaultUI: true
+    }
+    this.map = new google.maps.Map(this.mapRef.nativeElement, options);
+    //this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
+  }
+
+}

src/app/nearme/nearme-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NearmePage } from './nearme.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NearmePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NearmePageRoutingModule {}

src/app/nearme/nearme.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { NearmePageRoutingModule } from './nearme-routing.module';
+
+import { NearmePage } from './nearme.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NearmePageRoutingModule
+  ],
+  declarations: [NearmePage]
+})
+export class NearmePageModule {}

src/app/nearme/nearme.page.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar class="new-background-color">
+    <ion-buttons slot="start" color="light">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Wellnewss Route</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <div #nearmap id="nearmap"></div>
+      </ion-col>
+    </ion-row>
+    <ion-row >
+      <ion-col>
+        <ion-card *ngFor="let nearm of placenear">
+          <div *ngIf="nearm.better_featured_image != null">
+            <img src="{{nearm.better_featured_image.source_url}}" alt="">
+          </div>
+          <div *ngIf="nearm.better_featured_image == null">
+            <img src="/assets/images/temp.png" />
+          </div>
+          <ion-card-header>            
+            <a [routerLink]="['/tabs/place/', nearm.id]"><ion-card-title [innerHTML]="nearm.title.rendered"></ion-card-title>
+            </a>
+            <a [routerLink]="['/tabs/province/']">
+              <span [innerHTML]="nearm._embedded['wp:term'][1][0].name"></span>
+            </a> /
+            <a [routerLink]="['/tabs/place/']">
+              <span [innerHTML]="nearm._embedded['wp:term'][2][0].name"></span>
+            </a>
+          </ion-card-header>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

src/app/nearme/nearme.page.scss

@@ -0,0 +1,9 @@
+ion-card-title {
+    font-family: "IBM Plex Sans Thai", sans-serif !important;
+    font-weight: 600;
+    font-size: 20px;
+  }
+  
+  #nearmap {
+    height: 300px;
+}

src/app/nearme/nearme.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NearmePage } from './nearme.page';
+
+describe('NearmePage', () => {
+  let component: NearmePage;
+  let fixture: ComponentFixture<NearmePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NearmePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NearmePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/nearme/nearme.page.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+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: any;
+
+
+@Component({
+  selector: 'app-nearme',
+  templateUrl: './nearme.page.html',
+  styleUrls: ['./nearme.page.scss'],
+})
+export class NearmePage implements OnInit {
+
+  @ViewChild('nearmap', { static: true }) mapRef: ElementRef;  
+
+  nearmap: any;
+  placenear: any = [];
+
+  constructor(private wpservice: WpServiceService, private geolocation: Geolocation) { }
+
+  ngOnInit() {
+     
+    this.showMap();
+    //console.log(this.mapRef.nativeElement);  
+    this.wpservice.getNear().subscribe((placeneardata) => {
+      this.placenear = placeneardata;
+      console.log('load Near Place');
+      console.log(placeneardata);
+    });
+
+  }
+
+  showMap() {
+    let location = new google.maps.LatLng(13.7643439, 100.6899729);
+    let options = {
+      center: location,
+      zoom: 15,
+      disableDefaultUI: true
+    }
+    this.nearmap = new google.maps.Map(this.mapRef.nativeElement, options);
+  }
+  
+}

src/app/place/place.page.html

@@ -1,5 +1,8 @@
 <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>
@@ -13,6 +16,13 @@
           <div class="txt-place-title">Place Category Name</div>
         </ion-col>
       </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-toolbar class="search">
+            <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
+          </ion-toolbar>
+        </ion-col>
+      </ion-row>      
       <ion-card *ngFor="let pcl of placecatlist">
         <div *ngIf="$any(pcl).better_featured_image != null">
           <img src="{{$any(pcl).better_featured_image.source_url}}" alt="">

src/app/placedetail/placedetail.page.html

@@ -8,7 +8,7 @@
 </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">
@@ -25,21 +25,24 @@
         <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>
@@ -48,10 +51,22 @@
         <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

@@ -11,35 +11,65 @@
 //     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

@@ -1,7 +1,12 @@
-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',
@@ -12,7 +17,16 @@ export class PlacedetailPage implements OnInit {
   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;
 
@@ -21,23 +35,107 @@ export class PlacedetailPage implements OnInit {
     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.html

@@ -16,6 +16,13 @@
           <div class="txt-place-title">Province Name</div>
         </ion-col>
       </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-toolbar class="search">
+            <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
+          </ion-toolbar>
+        </ion-col>
+      </ion-row>
       <ion-card *ngFor="let provlist of provicelist">
         <div *ngIf="$any(provlist).better_featured_image != null">
           <img src="{{$any(provlist).better_featured_image.source_url}}" alt="">
@@ -24,7 +31,7 @@
           <img src="/assets/images/temp.png" />
         </div>
         <ion-card-header>
-          <a [routerLink]="['/tabs/place/', pldata.id]"><ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title></a>
+          <a [routerLink]="['/tabs/place/', provlist.id]"><ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title></a>
         </ion-card-header>
       </ion-card>
     </ion-grid>

src/app/province/province.page.scss

@@ -1,21 +1,4 @@
-// .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/app/tabs/tabs-routing.module.ts

@@ -61,6 +61,14 @@ const routes: Routes = [
         loadChildren: () => import('../province/province.module').then(m => m.ProvincePageModule)
       },
       {
+        path: 'gmap',
+        loadChildren: () => import('../gmap/gmap.module').then(m => m.GmapPageModule)
+      },
+      {
+        path: 'nearme',
+        loadChildren: () => import('../nearme/nearme.module').then( m => m.NearmePageModule)
+      },
+      {
         path: '',
         redirectTo: '/tabs/home',
         pathMatch: 'full'

src/app/tabs/tabs.page copy.html

@@ -1,8 +1,10 @@
 <ion-tabs>
   <ion-fab vertical="bottom" horizontal="center" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="add-outline"></ion-icon>
-    </ion-fab-button>
+    
+      <ion-fab-button [routerLink]="['/tabs/nearme/']">
+        <ion-icon name="add-outline"></ion-icon>
+      </ion-fab-button>
+    
   </ion-fab>
 
   <ion-tab-bar slot="bottom">

src/app/tabs/tabs.page.html

@@ -1,17 +1,16 @@
 <ion-tabs>
-  <!-- <ion-fab vertical="bottom" horizontal="center" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="add-outline"></ion-icon>
+  <ion-fab vertical="bottom" horizontal="center" translucent="true">
+    <ion-fab-button routerLink="nearme" routerDirection="forward">
+    <ion-icon name="navigate"></ion-icon>
     </ion-fab-button>
-  </ion-fab> -->
-
+  </ion-fab>
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="home">
       <ion-icon name="home"></ion-icon>
       <ion-label>หน้าแรก</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab2">
+    <ion-tab-button tab="nearme">
       <ion-icon name="location"></ion-icon>
       <ion-label>ใกล้ฉัน</ion-label>
     </ion-tab-button>

src/app/wp-service.service.ts

@@ -22,6 +22,13 @@ export class WpServiceService {
     );
   }
 
+  getNear() {
+    return this.http.get(
+      "/assets/json/place.json"
+      // "http://tamtime.iamarray.xyz/wp-json/wp/v2/place?_embed"
+    );
+  }
+
   getPlaceDetail(id) {
     return this.http.get(
       "http://tamtime.iamarray.xyz/wp-json/wp/v2/place/"+id+"/?_embed"

src/global.scss

@@ -164,4 +164,8 @@ a {
  
 // ion-content {
 //   --background: url(/assets/images/wnr-bg.jpg) no-repeat center/cover fixed;
-// }
+// }
+.ios ion-fab-button {
+  position:absolute;
+  bottom: 25px;
+}

src/index.html

@@ -17,6 +17,8 @@
   <!-- 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>