Ionic2 `service = new google.maps.places.AutocompleteService()` <= cannot find 'google' - google-maps

Question

EDIT: adding var google : any; to the global scope of autocomplete.ts did not solve the issue, just deffered it by a bit.
After dealing with this and following several forums for this error and implementing every npm install, both --save-dev to global.
-I've installed google-maps and #types/googlemaps in the package.json devDependencies', i've also installed the global typeings npm which I later used to install another dt-google.maps file, I've pretty much done everything and it's still showing cannot find 'google'.
I think it's a package issue, if i'm wrong -correct me.
package.json
{
"name": "githubIonic",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.1.0",
"#angular/compiler": "4.1.0",
"#angular/compiler-cli": "4.1.0",
"#angular/core": "4.1.0",
"#angular/forms": "4.1.0",
"#angular/http": "4.1.0",
"#angular/platform-browser": "4.1.0",
"#angular/platform-browser-dynamic": "4.1.0",
"#ionic-native/core": "3.7.0",
"#ionic-native/splash-screen": "3.7.0",
"#ionic-native/status-bar": "3.7.0",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.2.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.10"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-ionic-angular": "1.2.0",
"typescript": "2.2.1",
"google-maps": "^3.2.1",
"#types/googlemaps": "^3.26.11"
},
"description": "An Ionic project"
}
And
src/pages/autocomplete/autocomplete.ts
import { Component, NgZone } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ViewController} from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
/**
* Generated class for the AutocompletePage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-autocomplete',
templateUrl: 'autocomplete.html',
})
export class AutocompletePage {
autocompleteItems;
autocomplete;
service = new google.maps.places.AutocompleteService();
constructor(public viewCtrl: ViewController, private zone: NgZone, public navCtrl: NavController, public navParams: NavParams) {
this.autocompleteItems = [];
this.autocomplete = {
query: ''
};
}
dismiss() {
this.viewCtrl.dismiss();
}
chooseItem(item: any) {
this.viewCtrl.dismiss(item);
}
updateSearch() {
if (this.autocomplete.query == '') {
this.autocompleteItems = [];
return;
}
let me = this;
this.service.getPlacePredictions({
input: this.autocomplete.query,
componentRestrictions: {country: 'TH'}
}, function (predictions, status) {
me.autocompleteItems = [];
me.zone.run(function () {
predictions.forEach(function (prediction) {
me.autocompleteItems.push(prediction.description);
});
});
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad AutocompletePage');
}
}

Answer 1

I know I am a bit late but I hat the same issue. What I did was
First I installed typings
npm install -g typings#latest
on linux maybe
sudo npm install -g typings#latest
the next step is to install the google maps typings:
typings install dt~google.maps --global
Then I had to add the following line to the tsconfig.json file
under "include": [
// something like "src/**/*.ts"
, "typings/*.d.ts"
]

Answer 2

Include Google Maps API in your index.html
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
And then declare google var in your typescript file see below.
declare var google;
#IonicPage()
#Component({
selector: 'page-autocomplete',
templateUrl: 'autocomplete.html',
})
you can also refer this blog: Google Maps Autocomplete for Ionic 2 applications