Cannot find namespace 'google' in ionic 3 app

Question

can anyone help me with this error im getting in my ionic 3 application after my attempt to use google variable in my project,

npm install --save @types/google-maps

which added the following to my package.json:

"@types/google-maps": "^3.2.0",

i also did declare declare var google;

and did typings install dt~google.maps --global

then i seen this soultion and tried it but that did not work either (notice i generated an ios key and android key) tried this Cannot find namespace 'google'

ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE" $ npm install --save @ionic-native/google-maps

gist for my map.ts thats shooting this error:

https://gist.github.com/abdulfatah-ah1407281/25bc95352d0b1ba8e02b7d1e55cc7779

Error when i run ionic serve:

Cannot find namespace 'google'.
C:/Users/pkhon/Desktop/k/ItBroken/src/components/map/map.ts
private map: google.maps.Map;
public isMapIdle:boolean;

Answer 1

You didn't mention it, but I'm guessing you're on Windows. You're using ionic, and there's a platform difference under some circumstances (not sure who is responsible, ionic or typescript) where the same tsconfig.json file will work on macos (and maybe linux), but not in windows without explicitly adding a typeRoots entry to the compilerOptions of your tsconfig.json, like this:

// tsconfig.json
{
  "compilerOptions": {
    // ... other stuff
    "typeRoots": [ 'node_modules/@types' ]
  }
  // ... other stuff
}