20

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'

yashodha_h
  • 944
  • 3
  • 9
  • 23
  • 4
    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 Mar 07 '17 at 11:35
  • It worked to me in Ionic 3,refer this answer https://stackoverflow.com/questions/51084724/types-googlemaps-index-d-ts-is-not-a-module/51169121#51169121 – Afkar Jun 03 '19 at 18:00

6 Answers6

25

I solved it by installing:

$npm install @types/googlemaps --save-dev
Biranchi
  • 16,120
  • 23
  • 124
  • 161
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.

Douglas Barbin
  • 3,595
  • 2
  • 14
  • 34
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

Black Mamba
  • 13,632
  • 6
  • 82
  • 105
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

A. Morel
  • 9,210
  • 4
  • 56
  • 45
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" />

Narges
  • 39
  • 3
  • 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'`. – Jeb50 Dec 13 '22 at 22:04
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';
M.Bilal Murtaza
  • 1,757
  • 2
  • 10
  • 8