home-nearme-place-placedetail-province

package.json

@@ -30,8 +30,7 @@
     "@ionic-native/http": "^5.36.0",
     "@ionic-native/native-geocoder": "^5.36.0",
     "@ionic/angular": "^5.5.2",
-    "cordova-android": "^4.1.1",
-    "cordova-ios": "^4.0.1",
+    "cordova-ios": "6.2.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
@@ -56,6 +55,7 @@
     "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",
@@ -95,8 +95,7 @@
       }
     },
     "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/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/home/home.page.html

@@ -84,9 +84,4 @@
       </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/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

@@ -16,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/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/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;
+}