Created
September 17, 2017 13:04
-
-
Save abdulfatah-ah1407281/25bc95352d0b1ba8e02b7d1e55cc7779 to your computer and use it in GitHub Desktop.
map.ts Cannot find namespace 'google' ionic
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Component, Input, OnInit} from '@angular/core'; | |
import { Geolocation } from '@ionic-native/geolocation'; | |
import {Observable} from 'rxjs/Observable'; | |
import {Loading,LoadingController} from 'ionic-angular'; | |
import {PickupComponent} from '../pickup/pickup' | |
declare var google: any; | |
@Component({ | |
selector: 'map', | |
templateUrl: 'map.html' | |
}) | |
export class MapComponent implements OnInit { | |
@Input() isPickupRequested:boolean; | |
private map: google.maps.Map; | |
public isMapIdle:boolean; | |
public st:string; | |
constructor(private geolocation: Geolocation,public loadingCtrl: LoadingController) { | |
} | |
ngOnInit(){ | |
this.map =this.createMap(); | |
this.addMapEventListners(); | |
this.getCurrentLocation().subscribe(location => this.centerLocation(location)); | |
} | |
addMapEventListners(){ | |
// google.maps.event.addListner(this.map,'dragstart',() => { | |
// this.isMapIdle = false; // fires when finger starts moving around | |
// }); | |
// google.maps.event.addListner(this.map,'idle',() => { | |
// this.isMapIdle = true; // trigers when mouse stops moving | |
// }) | |
} | |
getCurrentLocation(){ | |
let options = { | |
timeout:10000, | |
enableHighAccuracy:true | |
}; | |
let loading = this.loadingCtrl.create({content:'Please wait...'}); | |
loading.present(); | |
//resp contains the latitude and longitude. //get current position returns a promise | |
let locationObs = Observable.create(observable => { | |
this.geolocation.getCurrentPosition(options).then((resp) => { | |
let lat = resp.coords.latitude; | |
let lng = resp.coords.longitude; | |
let location = new google.maps.LatLng(lat,lng); | |
observable.next(location); | |
loading.dismiss(); | |
},(err) =>{ | |
console.log(err); | |
loading.dismiss(); | |
}) | |
}) | |
return locationObs; | |
} | |
createMap(location = new google.maps.LatLng(40.712784,-74.005942)){ | |
let mapOptions = { | |
center: location, | |
zoom:15, | |
mapTypeId:google.maps.MapTypeId.ROADMAP, | |
disableDefaultUI:true | |
} | |
let mapEl = document.getElementById("map"); | |
let map = new google.maps.Map(mapEl,mapOptions); | |
return map; | |
} | |
centerLocation(location){ | |
if(location){ | |
this.map.panTo(location); | |
} | |
else{ | |
this.getCurrentLocation().subscribe(currentLoc => | |
this.map.panTo(currentLoc)); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment