TS2304: Cannot find name 'google'

Ionic Framework ionic-v3
1

Hi All,

I am following this tutorial to add maps to my app. If anyone can help, I’d appreciate it.

When I try serve my app, the CLI gives me this error:

TS2304: Cannot find name 'google'

I have tried, the following, but it makes no difference:

typings install dt~google-maps --global

My code is as follows:

import { Component } from '@angular/core';
import { Geolocation } from 'ionic-native';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/map/map.html',
})
export class MapPage {

  private map: any;
  //private google: any;

  constructor(private nav: NavController) {
    this.map = null;
    this.loadMap();
  }

  loadMap() {
    let options = {
      timeout: 10000,
      enableHighAccuracy: true
    };

    Geolocation.getCurrentPosition(options).then((position) => {

        let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

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

        this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    });

  }

}
2

Try a declare var google:any;

import { Component } from ‘@angular/core’;
import { Geolocation } from ‘ionic-native’;
import { NavController } from ‘ionic-angular’;
==> JUST HERE

3

Thanks Hollywood,

That kind of worked. I have no errors in the CLI at startup, and at runtime it did ask me if I want to share my location (progress). But I get this error when I try load the page:

Unhandled Promise rejection: google is undefined ; Zone: angular ; Task: Promise.then ; Value:
TypeError: google is undefined

Any ideas?

4

Can you share the map.html ?

5

Thanks

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon></button>
    <ion-title>Map</ion-title>
    <ion-nav-items>
      <button (click)="addMarker()" danger>Add Marker&nbsp;<ion-icon class="ion-ios-pin"></ion-icon></button>
    </ion-nav-items>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div id="map"></div>

</ion-content>
6

You need to add the typings executing:

$ typings install google.maps --global
7

Hi matheo,

Thanks for the reply.

I ran the following:

>typings install google.maps --global

And got this message:

typings ERR! message Unable to find "google.maps" ("npm") in the registry.
typings ERR! message However, we found "google.maps" for 1 other source: "dt"
typings ERR! message You can install these using the "source" option.

So I ran:

typings install dt~google-maps --global

app-base-dir>typings install dt~google-maps --global
typings INFO reference Stripped reference "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c21a2d49821b1a7d882b85e72255cdcf1532d1a3/googlemaps/google.maps.d.ts" during installation from "google-maps" (main)
google-maps
└── (No dependencies)

Now I get this error in the CLI:

TypeScript error: typings/globals/google-maps/index.d.ts(5,33): Error TS2503: Cannot find namespace 'google'.

Any ideas? It seems to have gone backwards.

8

You’ve installed google-maps and it requires google.maps, try installing it from dt too:

typings install dt~google.maps --global
1 Like
9

Good spot! Thanks

I ran:

>typings install dt~google.maps --global
google.maps
└── (No dependencies)

Now my CLI is free of errors. But at run time I get the following error when I try load the page:

EXCEPTION: Error: Uncaught (in promise): TypeError: google is undefined

10

SOLVED: Thank you for your help

I moved private google: any; back.

@Component({
  templateUrl: 'build/pages/map/map.html',
})
export class MapPage {

  private map: any;
  private google: any;
11

Nice, happy coding!! :smiley:

1 Like
12

HI,

This is not working for Ionic 2 rc0.Any idea?

13

There is no typings support in RC0 for building, try to use types like this “npm install --save @types/google-maps”

14

It didn’t work for me.

1 Like
15

Hi @toanuranjans did you find a way to install the javascript map ?
Thanks by advance

16

Hi,

“npm install --save @types/google-maps” seems working. Please ensure that package.json file has entry like

“@types/google-maps”: “^3.1.28” under dependencies and then run “npm install”.

image

Don’t forget to write declare var google:any; after import in your components

17

Thank you @toanuranjans for your answer but i still have the same mistake : “google is not defined”

My ts file is like this :

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

declare var google : any;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class Home {

constructor(public navCtrl: NavController) {}

ionViewDidLoad() {
console.log(‘Hello Home Page’);
let mapEle = document.getElementById(‘map’);

let map = new google.maps.Map(mapEle,{
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
and i added

to my index.html file

I have added the google-maps types as you said but the result is still the same. Do I have to import something else in my ts file ?

18

firiends help me pls

19

The problem seems that google api is not loaded by the time the code is checking google.map.

I don’t see what you have put in index.html here.Please mention the entire script tag here so that I can have look on it and ask you to correct if required.

Thanks

20 
Here is my body of my index.html with my script's tags @toanuranjans
 <body>
  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>
  <script src="cordova.js"></script>
  <script src="build/polyfills.js"></script>
  <script src="build/main.js"></script>
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</body></html>