Typescript Error Cannot find name 'google' in ionic2 when using googlemaps javascript API

Question

I am following Joshua Morony's Getting Started with Google Maps in Ionic 2 video tutorial. I want to use google maps in my application and i end up with a typescript error. this is a part of the pages/home/home.ts file

initMap(){
let latLng= new google.maps.LatLng(6.929848, 79.857407);

let mapOpt={
  center : latLng,
  zoom : 15,
  mapTypeId :google.maps.MapTypeId.ROADMAP
};

this.map= new google.maps.Map(this.mapElement.nativeElement,mapOpt);}

I tried npm install --save @types/googlemaps,

but it still gives me the same typescript error Typescript Error Cannot find name 'google'

The problem with the 2 existing answers is that they defeat the point of having npm install --save @types/googlemaps. You are saying you have this, they are saying use any. It doesn't solve the problem. You can even right click in your IDE and see the google declarations, but Ionic2 doesn't see it. — Clark
– Clark, Commented Mar 7, 2017 at 11:35
It worked to me in Ionic 3,refer this answer stackoverflow.com/questions/51084724/… — Afkar
– Afkar, Commented Jun 3, 2019 at 18:00

Biranchi · Accepted Answer · 2017-06-07 01:48:33Z

25

I solved it by installing:

$npm install @types/googlemaps --save-dev

answered Jun 7, 2017 at 1:48

Biranchi

16.4k23 gold badges128 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eli Over a year ago

Worked for me 2 :)

Abdu4 Over a year ago

@Eli I stuck with the same problem, can u help me.

Ruan Over a year ago

That repo moved. Its now npm i @types/google.maps

Douglas Barbin · Accepted Answer · 2017-02-11 14:52:14Z

15

To expand on the answer from @suraj, you should have:

declare var google;

outside of the class you are trying to use it in.

Just like in the Josh Morony video, I put it beneath the imports but before the class declaration and annotations (@Injectable() and so forth). I suppose it would still work if you put it above the imports or beneath the end of the class (and still outside of the class), if you were so inclined for whatever reason.

answered Feb 11, 2017 at 14:52

Douglas Barbin

3,6152 gold badges17 silver badges34 bronze badges

Comments

Black Mamba · Accepted Answer · 2021-03-30 12:55:32Z

11

npm install --save-dev @types/googlemaps

import {} from '@types/googlemaps';

from this answer

Or

in your component.ts file of your page declare it like this

declare var google; before export class component {}

An easy way Angular 6+ available in typescript is:

You only have to add this line at the beginning (meaning line 1, with nothing before) of your Typescript file :

/// <reference types="@types/googlemaps" />

And then

import {RemainingItems} from 'whicheverfolderyouwant';

Updated from

edited Mar 30, 2021 at 12:55

answered Mar 1, 2018 at 4:59

Black Mamba

15.8k7 gold badges94 silver badges113 bronze badges

Comments

A. Morel · Accepted Answer · 2018-12-01 11:05:18Z

8

You have to install types:

npm install --save-dev @types/googlemaps

And in your Typescript file where you use the namespace 'google':

[Angular 6+] Add this line at the beginning:

/// <reference types="@types/googlemaps" />

[Angular 5-] Add this line:

import {} from '@types/googlemaps';

from this answer

answered Dec 1, 2018 at 11:05

A. Morel

10.7k4 gold badges62 silver badges51 bronze badges

Comments

Narges · Accepted Answer · 2021-12-20 17:20:45Z

2

Newer version!

@types/googlemaps has been deprecated, instead, you need to install a different library:

npm install @types/google.maps

and at the very first line in your file, you will need to add a triple-slash directive:

/// <reference types="@types/google.maps" />

answered Dec 20, 2021 at 17:20

Narges

593 bronze badges

1 Comment

Jeb50 Over a year ago

I'm at Angular v14 w "@types/google.maps": "^3.51.0". Followed exactly instruction, const map = new google.maps.DistanceMatrixService(); still receives TS2663: Cannot find name 'google'.

M.Bilal Murtaza · Accepted Answer · 2018-11-12 21:58:32Z

0

No need to do some thing extra Just go into index.d.ts and paste this before declare namespace google.maps

declare module 'googlemaps';

answered Nov 12, 2018 at 21:58

M.Bilal Murtaza

1,9932 gold badges12 silver badges10 bronze badges

Collectives™ on Stack Overflow

Typescript Error Cannot find name 'google' in ionic2 when using googlemaps javascript API

6 Answers 6

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related