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();
}
}