I am working with angular2-google-maps
and latest version of Angular2. I am trying to convert some of the local map component functions into services in their own file maps.service.ts
. For example:
map.component.ts
getGeoLocation(lat: number, lng: number) {
if (navigator.geolocation) {
let geocoder = new google.maps.Geocoder();
let latlng = new google.maps.LatLng(lat, lng);
let request = { latLng: latlng };
geocoder.geocode(request, (results, status) => {
if (status == google.maps.GeocoderStatus.OK) {
let result = results[0];
if (result != null) {
this.fillInputs(result.formatted_address);
} else {
alert("No address available!");
}
}
});
}
}
Into something like: maps.service.ts
getGeoLocation(lat: number, lng: number): Observable<google.maps.GeocoderResult[]> {
let geocoder = new google.maps.Geocoder();
let latlng = new google.maps.LatLng(lat, lng);
let request = { latLng: latlng };
return new Observable((observer: Observer<google.maps.GeocoderResult[]>) => {
geocoder.geocode({ request }, (
(results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
if (status == google.maps.GeocoderStatus.OK) {
observer.next(results);
observer.complete();
} else {
console.log('Geocoding service failed due to: ' +status);
observer.error(status);
}
}
));
});
}
The issue I'm getting is that google
variable is not being recognized when I try to use Observer<google.maps.GeocoderResult[]>
. I have declare var google: any;
outside of the service class as well.
The google
variable works in my map.componenet.ts
but doesn't get recognized in the maps.service.ts
.
npm install @types/googlemaps --save-dev
tsconfig.app.json
respectively in tsconfig.spec.json
In the end should look like this:
You can delete both declaration types from the components:
import {} from '@types/googlemaps';
declare var google: any;
You don't have to include any of them.
PS: If you are using agm-s GoogleMapsAPIWrapper.getNativeMap() you must convert the map object before you use it. For example turning on the traffic layer:
this.apiWrapper.getNativeMap().then(map => {
this.trafficLayer = new google.maps.TrafficLayer();
const gMap: any = map;
this.trafficLayer.setMap(gMap as google.maps.Map);
});