How to Fixed Center Marker & Get New LatLng

@7wins wrote:

I have a problem that I can not solve. I am trying to create a marker to place fixedly on the screen. Like the uber application. I use Google Maps native. I thank you if you find a solution.

Here my code .

Lokasi.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform,LoadingController,AlertController } from 'ionic-angular';
import { GoogleMaps, GoogleMap,GoogleMapsEvent,Marker,MarkerOptions,GoogleMapOptions } from'@ionic-native/google-maps';
import { Geolocation } from'@ionic-native/geolocation';


/**
 * Generated class for the LokasiPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-lokasi',
  templateUrl: 'lokasi.html',
})
export class LokasiPage {
  map:GoogleMap;
  loading:any;
  lat=0;
  lng=0;

  constructor(public navCtrl: NavController, public navParams: NavParams, 
    public platfrom:Platform, public geolocation: Geolocation,public loader:LoadingController, private alert:AlertController) {
      this.platfrom.ready().then(()=>{ 
        this.loadMap();
      })
       

  }

  ionViewDidLoad() {
    this.showLoading();
   

  
    console.log('ionViewDidLoad LokasiPage');
  }
  
  

  showLoading(){
    this.loading= this.loader.create({
      content:'Menunggu map'
    });
    this.loading.present();
  }
  dismissLoading(){
      this.loading.dismiss();
      this.loading= null;
   
  }
  addMarker(){
  this.map.addMarker({
    title:'Lokasi Saya',
    icon:'red',
    position:{
      lat:this.lat,
      lng:this.lng
    }
  }).then((marker:Marker)=>{
    marker.showInfoWindow();
  });
  }

loadMap(){
  
this.geolocation.getCurrentPosition({enableHighAccuracy:true,timeout:20000, maximumAge:0}).then((resp)=>{
  this.lat=resp.coords.latitude
  this.lng=resp.coords.longitude
  this.dismissLoading();


 let mapOptions: GoogleMapOptions = {
   controls:{
     'compass':true,
     'myLocationButton':true,
     'myLocation':true,
   },
    camera: {
       target: {
         lat: this.lat,
         lng: this.lng
       },
       zoom: 18,
       tilt: 30
     }
  };



  this.map=GoogleMaps.create('map',mapOptions);
  this.addMarker();
}).catch((error)=>{
  console.log('error',error);
});



  //wait the maps
  this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{
    console.log('map ready')
    
   
  })
}
onButton_click() {
  // Show the current camera target position.
  var target = this.map.getCameraTarget();

  let alert = this.alert.create({
    title: 'Current camera target',
    subTitle: [
      "lat: " + target.lat,
      "lng: " + target.lng
    ].join("<br />"),
    buttons: ['Dismiss']
  });
  alert.present();
}

}

Posts: 1

Participants: 1

Read full topic