Fairoj : Google Map Screen for detecting current location is added

.sourcemaps/0.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../@angular/common/http (ignored)"],"names":[],"mappings":";;;;;AAAA,e","file":"0.js","sourcesContent":["/* (ignored) */\n\n\n//////////////////\n// WEBPACK FOOTER\n// @angular/common/http (ignored)\n// module id = 726\n// module chunks = 0"],"sourceRoot":""}
+{"version":3,"sources":["../../@angular/common/http (ignored)"],"names":[],"mappings":";;;;;AAAA,e","file":"0.js","sourcesContent":["/* (ignored) */\n\n\n//////////////////\n// WEBPACK FOOTER\n// @angular/common/http (ignored)\n// module id = 728\n// module chunks = 0"],"sourceRoot":""}

src/app/app.component.ts

@@ -21,6 +21,7 @@ import { PdtriggerProvider } from '../providers/pdtrigger/pdtrigger';
 import {AppVersion} from '@ionic-native/app-version'
 import { ConstantsProvider } from '../providers/constants/constants';
 import { Market } from '@ionic-native/market';
+import { GoogleMapPage } from '../pages/google-map/google-map';
 
 // declare let notificationAccess:boolean
 
@@ -64,6 +65,7 @@ export class MyApp {
     this.pages = [          
       // { title: 'Home', component: HomePage, icon: 'home' },
       { title: 'Home', icon: 'home',method:()=>this.menulist(1) },
+      { title: 'My Location', icon: 'locate',method:()=>this.menulist(4) },
       { title: 'Logout', icon: 'md-exit',method:()=>this.menulist(2)},
       { title: 'Complete List', icon: 'checkmark-circle',method:()=>this.menulist(3)}
 
@@ -91,7 +93,8 @@ this.notificationAccess=false
       this.statusBar.styleDefault();
       if (this.platform.is('android')) {
         this.statusBar.overlaysWebView(false);
-        this.statusBar.backgroundColorByHexString('#db4437');
+        // this.statusBar.backgroundColorByHexString('#db4437');
+        this.statusBar.backgroundColorByHexString('#E00201');
         
     }
     this.appVersion.getVersionNumber().then(versionNumber=>{
@@ -243,6 +246,7 @@ let alert=this.alertCtrl.create({
   this.nav.setRoot(CompleteListPage);
   break;
   case 4:
+   this.nav.push(GoogleMapPage);
   break;
 }
 }

src/app/app.module.ts

@@ -145,6 +145,7 @@ import {Market} from '@ionic-native/market'
 import { PdGeneralImagesModule } from '../pages/pd-general-images/Pd-general-images.module';
 import { ReqTokenInterceptor } from '../providers/_guard/req-token.interceptor';
 import { ImageNameModelPage } from '../pages/Modal/image-name-model/image-name-model';
+import { GoogleMapPageModule } from '../pages/google-map/google-map.module';
 
 @NgModule({
     declarations: [
@@ -248,7 +249,8 @@ import { ImageNameModelPage } from '../pages/Modal/image-name-model/image-name-m
         ContentLoaderModule,
         IonicStorageModule.forRoot(),
         CacheModule.forRoot(),
-        PdGeneralImagesModule
+        PdGeneralImagesModule,
+        GoogleMapPageModule
         
     ],
     bootstrap: [IonicApp],

src/index.html

@@ -14,7 +14,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">
-
+  <!-- FOR GOOGLE MAPS -->
+  <script src="https://maps.google.com/maps/api/js?key=AIzaSyA3lYDYxwtn5vLSl45SOKbtK7G6cEyXGr0"></script>
   <!-- cordova.js required for cordova apps (remove if not needed) -->
   <script src="cordova.js"></script>
 

src/pages/google-map/google-map.html

@@ -0,0 +1,25 @@
+<!--
+  Generated template for the GoogleMapPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar color="optblue">
+      <!-- <button ion-button menuToggle>
+          <ion-icon name="menu"></ion-icon>
+        </button> -->
+    <ion-title style="text-align: center">{{current_coordinates}}</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+  <div id="refresh_coords" *ngIf="is_loaded">
+    <button ion-button (click)="addMarker()" clear
+     ><ion-icon name="locate"></ion-icon></button>
+  </div>
+  <div #map id="map"></div>  
+</ion-content>

src/pages/google-map/google-map.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { GoogleMapPage } from './google-map';
+
+@NgModule({
+  declarations: [
+    GoogleMapPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(GoogleMapPage),
+  ],
+})
+export class GoogleMapPageModule {}

src/pages/google-map/google-map.scss

@@ -0,0 +1,18 @@
+page-google-map {
+    .scroll-content {
+        // height: 100%;
+        padding:3px !important;
+      }
+
+      #map {
+        width: 100%;
+        height: 100%;
+      }
+      #refresh_coords{
+          position: absolute;
+        top: 10px;
+        right: 60px;
+        z-index: 5;
+        background-color: #fff;
+      }
+}

src/pages/google-map/google-map.ts

@@ -0,0 +1,153 @@
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+// import { Geolocation } from '@ionic-native/geolocation';
+import { Geolocation } from '@ionic-native/geolocation';
+import { ConstantsProvider } from '../../providers/constants/constants';
+import { Platform } from 'ionic-angular/platform/platform';
+
+/**
+ * Generated class for the GoogleMapPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+declare var google;
+
+@IonicPage()
+@Component({
+  selector: 'page-google-map',
+  templateUrl: 'google-map.html',
+})
+export class GoogleMapPage {
+  @ViewChild('map') mapElement: ElementRef;
+  map: any;
+  marker
+  is_loaded:boolean=false
+  current_coordinates:string="Loading..."
+  constructor(public navCtrl: NavController, public navParams: NavParams,private geolocation:Geolocation,private constantProvider:ConstantsProvider,private platform:Platform) {
+  this.constantProvider.enableAccuracy()
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad GoogleMapPage');
+    console.log(this.platform.is('core'))
+    if(!this.platform.is('cordova')){
+      this.dummyloadMap()
+    }
+    else{
+    this.loadMap();
+    }
+  }
+
+  loadMap(){
+      this.is_loaded=false
+    this.geolocation.getCurrentPosition().then((position) => {
+      console.log(position)
+      this.current_coordinates=String(position.coords.latitude)+','+String(position.coords.longitude)
+      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+    //   let latLng = new google.maps.LatLng(12.9788093,80.1871215);
+    // this.current_coordinates="12.9788093,80.1871215"
+    let mapOptions = {
+      center: latLng,
+      zoom: 15,
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    }
+
+    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
+    this.is_loaded=true
+    this.addInitialMarker(position.coords.latitude,position.coords.longitude)
+   
+  }, (err) => {
+    console.log(err);
+    
+  });
+  
+  }
+  addInitialMarker(lat,lang){
+    this.marker = new google.maps.Marker({
+      map: this.map,
+      animation: google.maps.Animation.DROP,
+      position:{lat:lat,lng:lang}
+    });
+    let content = lat+','+lang;          
+    this.addInfoWindow(this.marker, content);
+  }
+  addMarker(){
+this.constantProvider.getGeoTag().then((geoCords:any)=>{
+  if(geoCords == undefined){
+    return
+  }
+  // alert(geoCords)
+  let geoCords_string:string=String(geoCords)
+  // alert(geoCords_string)
+  if(this.marker != undefined){
+    this.marker.setMap(null)
+        }
+  let position=geoCords_string.split(',')
+  console.log(position);
+  let curr_lat=Number(position[0])
+  let curr_lng=Number(position[1])
+  console.log(curr_lat,curr_lng);
+    this.marker = new google.maps.Marker({
+      map: this.map,
+      animation: google.maps.Animation.DROP,
+      position:{lat:curr_lat,lng:curr_lng}
+    });
+    let latLng = new google.maps.LatLng(curr_lat,curr_lng);
+    this.map.setCenter(latLng)
+    this.current_coordinates=geoCords_string
+    let content = geoCords_string;          
+    this.addInfoWindow(this.marker, content);
+  })
+  }
+  dummyloadMap(){
+    console.log(this.platform)
+    // this.geolocation.getCurrentPosition().then((position) => {
+    //   console.log(position)
+    //   this.current_coordinates=String(position.coords.latitude)+','+String(position.coords.longitude)
+    //   let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+      let latLng = new google.maps.LatLng(12.9912884,80.1667786);
+    this.current_coordinates="12.9912884,80.1667786"
+    let mapOptions = {
+      center: latLng,
+      zoom: 15,
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    }
+
+    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
+    this.dummyMarker()
+  // }, (err) => {
+  //   console.log(err);
+    
+  // });
+  
+  }
+  dummyMarker(){
+    console.log(this.marker)
+    if(this.marker != undefined){
+this.marker.setMap(null)
+    }
+    this.marker = new google.maps.Marker({
+      map: this.map,
+      animation: google.maps.Animation.DROP,
+      position:{lat:12.9912884,lng:80.1667786}
+    });
+    let latLng = new google.maps.LatLng(12.9912884,80.1667786);
+      this.map.setCenter(latLng)
+    this.current_coordinates="12.9912884,80.1667786"
+    let content = this.current_coordinates;          
+    this.addInfoWindow(this.marker, content);
+  }
+
+  addInfoWindow(marker, content){
+
+    let infoWindow = new google.maps.InfoWindow({
+      content: content
+    });
+
+    google.maps.event.addListener(marker, 'click', () => {
+      infoWindow.open(this.map, marker);
+    });
+
+  }
+}

www/index.html

@@ -17,7 +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">
-
+  <!-- FOR GOOGLE MAPS -->
+  <script src="https://maps.google.com/maps/api/js?key=AIzaSyA3lYDYxwtn5vLSl45SOKbtK7G6cEyXGr0"></script>
   <!-- cordova.js required for cordova apps (remove if not needed) -->
   <script src="cordova.js"></script>