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

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:

  1. Is this just something caused by the IDE I’m using?

  2. 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

1 Like

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:

  1. Install the TypeScript Definition Manager CLI using npm… npm install typings --global

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

  3. 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!

4 Likes

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?

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!

2 Likes

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

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

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 :slight_smile:

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

Thank you so much… it worked :slight_smile:

1 Like

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

1 Like

Same problem here… RC2

npm install @types/googlemaps --save-dev

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

2 Likes

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.

1 Like

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

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.

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

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

5 Likes

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’.

Do you have the folloiwng in your index.html?

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

yes i have done that

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

  1. npm install @types/googlemaps --save-dev

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

  3. declare module 'googlemaps'; into declarations.d.ts

  4. import {googlemaps} from 'googlemaps'; in class where you using maps

8 Likes