database send

klu5/src/pages/home/maps.html

+<!--
+  Generated template for the MapsPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>maps</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+    <div padding>
+        <button block ion-button  style="padding:0px; width: 100%;" medium (click)="mapUser()">LOCATE ME</button>
+       
+    </div>
+
+    <agm-map  [latitude]="location?.coords.latitude" [streetViewControl]="true" [longitude]="location?.coords.longitude" [mapTypeId]="'hybrid'" [zoom]="15">
+  <agm-marker [label]="options" [latitude]=" location?.coords.latitude" [longitude]="location?.coords.longitude" [markerClickable]="true"></agm-marker>
+</agm-map>
+</ion-content>

klu5/src/pages/home/maps.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { MapsPage } from './maps';
+
+@NgModule({
+  declarations: [
+    MapsPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(MapsPage),
+  ],
+})
+export class MapsPageModule {}

klu5/src/pages/home/maps.scss

+page-maps {
+    agm-map {
+        height: 500px;
+        width: 1000px;
+        position: absolute;
+        left: 0;
+        bottom: 5;
+    }
+
+}

klu5/src/pages/home/maps.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams ,Platform} from 'ionic-angular';
+import { AgmCoreModule } from '@agm/core';
+import { Geolocation } from '@ionic-native/geolocation';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+
+/**
+ * Generated class for the MapsPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-maps',
+  templateUrl: 'maps.html',
+})
+export class MapsPage {
+  baseURI : string  = "http://localhost/mani/newfile.php";
+  coords:any;
+  location:any;
+  constructor(public navCtrl: NavController,public http: HttpClient, private geolocation: Geolocation,public navParams: NavParams,public platform:Platform) {
+  }
+   options={
+     colorl:'#ASDF96',
+     fontfamilyl:'',
+     fontsizel:'14px',
+     fontweightl:'bold',
+     textl:'B',
+    }
+  entry(latitude:number,longitude:number): void
+  {
+    let headers 	: any		= new HttpHeaders({ 'Content-Type': 'application/json' }),
+    options 	: any		= { "key" : "create", "latitude" :latitude,"longitude" : longitude},
+    url       : any      	= this.baseURI;
+
+this.http
+.post(url, JSON.stringify(options), headers)
+.subscribe((data: any) =>
+{
+   // If the request was successful notify the user
+   console.log(`Congratulations the technology: ${latitude} was successfully updated`);
+},
+(error : any) =>
+{
+   console.log({error});
+});
+  }     
+  mapUser(): void
+  {
+    this.platform.ready().then(()=>{
+      let options={timeout:3000,enableHighAccuracy:true,maximumAge:0}
+  this.geolocation.getCurrentPosition(options).then((location) => {
+    console.log('Fetched the location successfully',location);
+    this.location=location;
+    let latitude : number=this.location.coords.latitude,
+      longitude : number=this.location.coords.longitude;
+      this.entry(latitude,longitude);
+      
+
+  }).catch((error) => {
+    console.log('Error getting location', error);
+    //let latitude : number=this.location.coords.latitude,
+    //longitude : number=this.location.coords.longitude;
+    //this.entry(latitude,longitude);
+  });
+  });
+  
+    }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad MapsPage');
+  }
+
+}