this code itâs work some time if i open app 10 times 8-9 times work
about 1-2 time crash above error
// import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { IonicPage, NavController , NavParams} from 'ionic-angular';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { LoadingController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';
import { Geolocation } from '@ionic-native/geolocation';
import { AlertController } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase';
import SlidingMarker from 'marker-animate-unobtrusive';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
import { Platform } from 'ionic-angular';
// import { Observable } from 'rxjs/Observable';
/**
* Generated class for the MapPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
declare var google:any;
@IonicPage()
@Component({
selector: 'page-map',
templateUrl: 'map.html',
})
export class MapPage {
@ViewChild('map') mapElement: ElementRef;
lat:any;
lng:any;
name:any;
map: GoogleMap;
location: any;
// start:any;
end:any;
gps: any;
distance: any;
howtime: any;
loader: any;
cars: any;
marker:any;
markers: any = [];
sloop = 0;
iconEnd:any;
iconStart:any
directionsService:any;
directionsDisplay:any;
constructor(public platform: Platform, public loading:LoadingController, public db: AngularFireDatabase, public alertCtrl: AlertController, public navParams:NavParams,public navCtrl: NavController, public geolocation: Geolocation, public loadingCtrl: LoadingController, public restProvider: RestProvider) {
this.lat = navParams.get("lat");
this.lng = navParams.get("lng");
this.name = navParams.get("name");
this.end = {lat:this.lat, lng:this.lng};
}
users: any;
ionViewDidLoad() {
this.platform.ready().then(() => {
this.directionsService = new google.maps.DirectionsService;
this.directionsDisplay = new google.maps.DirectionsRenderer;
//āļāļģāļŦāļāļāđāļāļāļāļ
this.iconEnd = {
url: 'assets/icon/imhere.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(60, 82),
// The origin for this image is (0, 0).
destination: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(29, 82),
rotation: ''
};
this.iconStart = {
url: 'assets/icon/caricon.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(60, 82),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(29, 82),
rotation: ''
};
//connect āļĢāļāđāļ firebase
this.cars = this.db.list('/car_gps/' + this.name).valueChanges();
this.initMap();
this.loader = this.loading.create({
content: 'āđāļāļĢāļāļĢāļāļŠāļąāļāļāļĢāļđāđ...āļĢāļ°āļāļāļāļģāļĨāļąāļāļāļģāļāļ§āļāđāļŠāđāļāļāļēāļ',
});
this.loader.present();
});
}
ionViewWillLeave() {
this.loader.dismiss();
}
carPosition()
{
return new Promise((resolve, reject) => {
this.cars = this.db.list('/car_gps/' + this.name).valueChanges();
resolve(this.cars);
reject('error');
});
}
getCurrentLocation(){
let watch = this.geolocation.watchPosition();
watch.subscribe((data) => {
this.carPosition().then(result => {
this.cars.forEach(element => {
for (var i = 0; i < element.length; i++) {
//āļāļąāļāļāļģāļāļ§āļāļĢāļāļ
//āđāļāđāļāļāļģāļāļ§āļāļĢāļāļāļąāđāļāļŦāļĄāļ
if (i === 1)
this.lat = element[i]
if (i === 2)
this.lng = element[i]
if (i === 4) {
this.name = element[i];
}
}
this.end = { lat: this.lat, lng: this.lng };
this.calculateAndDisplayRoute(this.end['lat'] + "," + this.end['lng'], data.coords.latitude + ',' + data.coords.longitude);
console.log(this.lat);
console.log(this.lng);
});
});
// console.log(data.coords.longitude);
});
}
initMap() {
const options = {
// center: location,
zoom: 10
}
this.map = new google.maps.Map(this.mapElement.nativeElement, options);
this.directionsDisplay.setMap(this.map);
this.directionsDisplay.setOptions({ suppressMarkers: true });
this.getCurrentLocation();
}
centerMap(lat, lng)
{
const location = new google.maps.LatLng(lat, lng);
this.createMap(location);
}
createMap(location){
const options = {
center: location,
zoom: 10
}
this.map = new google.maps.Map(this.mapElement.nativeElement, options);
}
addMarker(position, map, icon, i)
{
//āđāļāļīāđāļĄ marker āđāļāļ slide
this.markers[i] = this.marker = new SlidingMarker({
map: this.map,
position: new google.maps.LatLng(position),
icon: icon
});
this.marker.setDuration(10000);
this.marker.setEasing('linear');
}
updateMarker(position, i)
{
//āļāļąāļāđāļāļāļāļģāđāļŦāļāđāļāđāļāļīāļĄ
this.markers[i].setPosition(new google.maps.LatLng(position));
}
clearLocations() {
for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(null);
}
this.markers.length = 0;
}
calculateAndDisplayRoute(start, end) {
var sp_start = start.split(",", 2);
var sp_end = end.split(",", 2);
console.log(Number(sp_start[0]));
this.sloop++;
var ss = { lat: Number(sp_start[0]), lng: Number(sp_start[1])};
var ee = { lat: Number(sp_end[0]), lng: Number(sp_end[1])};
//if not first round give update
if(this.sloop === 1)
{
this.addMarker(ss, this.map, this.iconStart, 0);
this.addMarker(ee, this.map, this.iconEnd, 1);
}else{
this.updateMarker(ss, 0);
this.updateMarker(ee, 1);
}
this.directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, (response, status) => {
if (status === 'OK') {
this.loader.dismiss();
this.directionsDisplay.setDirections(response);
this.distance = response['routes'][0]['legs'][0]['distance']['text'];
this.howtime = response['routes'][0]['legs'][0]['duration']['text'];
} else {
}
});
}
showAlert(message) {
let alert = this.alertCtrl.create({
title: 'New Friend!',
subTitle: message,
buttons: ['OK']
});
alert.present();
}
}
