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

#1

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

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
#3

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?

#4

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
#5

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

#6

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

#7

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:

#8

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

#9

Thank you so much… it worked :slight_smile:

1 Like
#10

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

1 Like
#11

Same problem here… RC2

#12

npm install @types/googlemaps --save-dev

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

2 Likes
#13

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
#14

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

#15

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.

#16

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

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

5 Likes
#17

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

#18

Do you have the folloiwng in your index.html?

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

#19

yes i have done that

#20

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

9 Likes
Google maps native plugin