Google maps TypeScript error: Cannot find name 'google' - discussion

william_harris · April 21, 2016, 11:09am

Using Visual Studio 2015 I added google maps to one of my pages and inside that page’s TypeScript file whenever I referenced google I was getting the TypeScript error: Cannot find name ‘google’.

I was stuck on this for a few hours because I followed tutorials like this and did everything as explained but this error persisted. What I eventually realized was that I needed to include the TypeScript definition files for google maps (which I fetched from this repo) in my application so I added this inside the typings folder of the application structure.

Discussion

So although I resolved the error I wanted to know if this is the expected procedure when it comes to using the Google JavaScript API in an application because all tutorials relating to Ionic 2 and Google maps do not bring this up.

What I would like to know is:

Is this just something caused by the IDE I’m using?
Is there likely to be a way in the future for me to not have to manually add the definition files myself?

Ionic info (in case it has any relevance to this discussion)

Cordova CLI: 5.4.0
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
OS: Windows 8.1
Node Version: v4.4.2

william_harris · May 19, 2016, 8:50am

This discussion didnt seem to take off but i’ve found a more complete solution than the one I mentioned in my question which was copying and pasting things into the typings folder.

Instead what you can do is:

Install the TypeScript Definition Manager CLI using npm… npm install typings --global
Then use your CLI to navigate into your Ionic 2 project’s folder
And finally, install the google map definition files using the typings CLI… typings install dt~google.maps --global

Once you have done this you should end up with the following files in your project’s typings > global > google.maps directory:

index.d.ts
typings.json

Also, you don’t need to add reference path to the top of the files that use google maps. In my original solution I did have to do this.

This issue on GitHub helped me with step 3!

dmastag · June 4, 2016, 5:51pm

Thanks for the explanation, am following your steps and am still getting cannot find name ‘google’.
Currently I use Visual Studio Code and the problem pops up in the IDE and on ionic serve in my terminal.

Curious if there is another step I must do after doing all of your 3 steps?

dmastag · June 4, 2016, 5:55pm

Ok, found the problem on my side. I think that step 2 should be changed from

Then use your CLI to navigate into your Ionic 2 project’s typings folder

into

Then use your CLI to navigate into your Ionic 2 project’s folder

It was working after I did that.
Thanks for the tip, this was bugging me for so long!

KhanSadique · June 6, 2016, 4:39am

Dear, Can you provide sample code, which is running properly with google.maps.

dmastag · June 6, 2016, 6:04am

Is this in response to the typings problem or do you need to know how to implement google maps into ionic2?

william_harris · June 6, 2016, 8:21am

Both work for me but yours might be the better way because mine creates another typings folder inside the already existing typings folder e.g. typings > typings > globals > google.maps and your approach doesn’t so the result looks like this. typings > globals > google.maps

I will update step 2 to what you said

neerav94 · July 28, 2016, 6:49pm

hey @dmastag
I am still getting the same error… Do you have any solution or know why is it happening?

Error: Cannot find name ‘google’.
namespace google

DigitalIQ · August 3, 2016, 10:38am

Thank you so much… it worked

3jFernando · November 19, 2016, 9:34pm

Hola.
Tengo el mismo problema, no he podido darle solucion, espero me ayuden.

SonecaJones · November 29, 2016, 3:18pm

Same problem here… RC2

reedrichards · November 29, 2016, 3:21pm

npm install @types/googlemaps --save-dev

(to install the google-map typescript definition for Ionic2 >= RC.0)

ridlam · December 7, 2016, 1:03am

hi guys i had the same error
i add this import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native'; to my ts file
and it’s work fine for me ,i hope for you too.

ajsivsan · December 14, 2016, 2:22pm

Hi I am facing issue while building the app. I am under tight timelines and this is really killing my delivery schedule. I had no issue with ionic serve and testing it on the browser. Any help would be highly appreciated. Thanks again.

ionic-app-scripts build

[08:16:22] ionic-app-scripts 0.0.38
[08:16:23] build prod started …
[08:16:23] clean started …
[08:16:23] clean finished in 5 ms
[08:16:23] copy started …
[08:16:23] ngc started …
[08:16:24] lint started …
[08:16:25] copy finished in 2.21 s
[08:16:56] lint finished in 32.03 s
[08:17:29] Error: Error at G:/Projects/.tmp/components/map/map.ts:10:15
[08:17:29] Cannot find namespace ‘google’.
[08:17:29] Error at G:/Projects/.tmp/components/map/map.ts:22:27
[08:17:29] Cannot find name ‘google’.
[08:17:29] Error at G:/Projects/.tmp/components/map/map.ts:27:18
[08:17:29] Cannot find name ‘google’.
[08:17:29] Error at G:/Projects/.tmp/components/map/map.ts:32:19
[08:17:29] Cannot find name ‘google’.
[08:17:29] Error at G:/Projects/.tmp/components/map/map.ts:37:26
[08:17:29] Cannot find name ‘google’.
[08:17:29] Error at G:/Projects/.tmp/components/map/map.ts:40:24
[08:17:29] Cannot find name ‘google’.
[08:17:29] Error at G:/Projects/.tmp/components/map/map.ts:42:21
[08:17:29] Cannot find name ‘google’.
[08:17:29] Error at G:/Projects/.tmp/components/map/map.ts:44:26
[08:17:29] Cannot find name ‘google’.
[08:17:29] Error at G:/Projects/.tmp/pages/list-page/list-page.ngfactory.ts:642:72
[08:17:29] Supplied parameters do not match any signature of call target.
[08:17:29] Error at G:/Projects/.tmp/pages/list-page/list-page.ngfactory.ts:648:72
[08:17:29] Supplied parameters do not match any signature of call target.
[08:17:29] Error at G:/Projects/.tmp/pages/list-page/list-page.ngfactory.ts:846:72
[08:17:29] Supplied parameters do not match any signature of call target.
[08:17:29] Error at G:/Projects/.tmp/pages/list-page/list-page.ngfactory.ts:852:72
[08:17:29] Supplied parameters do not match any signature of call target.
[08:17:29] Error at G:/Projects/.tmp/pages/detail-page/detail-page.ngfactory.ts:708:73
[08:17:29] Supplied parameters do not match any signature of call target.
[08:17:29] Error at G:/Projects/.tmp/pages/detail-page/detail-page.ngfactory.ts:719:73
[08:17:29] Supplied parameters do not match any signature of call target.
[08:17:29] ngc failed
[08:17:29] ionic-app-script task: “build”
[08:17:29] Error: Error

richardmarais · December 31, 2016, 8:50am

Did you manage to solve this?

I am facing the same problem.

I do have the following in my index.html

<script src="http://maps.google.com/maps/api/js?key=XXXXX"></script>

and in my pckage.json

"@types/googlemaps": "^3.25.40",

When I was using Ionic 2 beta it worked, but since an upgrade to rc3, I get:

Cannot find namespace 'google'

and

Cannot find name 'google'.

when trying to:

public map: google.maps.Map = null;

However, in my IDE, when I click on google.maps, it takes me to:

node_modules/@types/googlemaps/index.d.ts declare namespace google.maps {

as expected.

richardmarais · December 31, 2016, 9:44am

I solved this my adding the following to declarations.d.ts

/// <reference path="../node_modules/@types/googlemaps/index.d.ts" />

vks_gautam1 · January 3, 2017, 7:39am

i followed this tutorial
http://devfanaticblog.com/google-maps-autocomplete-for-ionic-2-applications/#more-85
i found the following error "Cannot find name ‘google’.

richardmarais · January 3, 2017, 9:50am

Do you have the folloiwng in your index.html?

<script src="http://maps.google.com/maps/api/js?key=XXXXX"></script>

vks_gautam1 · January 3, 2017, 10:59am

yes i have done that

dpucar · January 4, 2017, 1:49pm

I solved this, here is what you have to do:

npm install @types/googlemaps --save-dev
<script src="http://maps.google.com/maps/api/js?key=XXXXX"></script> in index.html
declare module 'googlemaps'; into declarations.d.ts
import {googlemaps} from 'googlemaps'; in class where you using maps

Topic		Replies	Views
TS2304: Cannot find name 'google' ionic-v3	28	11427	January 15, 2017
Typescript Error Cannot find name 'google' ionic-v3	10	7798	July 19, 2021
Ionic 2 + Typescript + Google Maps ionic-v3	27	18690	January 2, 2017
Typescript global var not found ionic-v3	3	765	April 13, 2017
Cannot find namespace 'google' in ionic 3 app ionic-v3	2	4019	February 4, 2019

Google maps TypeScript error: Cannot find name 'google' - discussion

Related topics