Typescript Error Cannot find name 'google'

Ionic Framework ionic-v3
1

google-map.ts

import { Component,ViewChild } from ‘@angular/core’;

@Component({
selector: ‘google-map’,
templateUrl: ‘google-map.html’
})
export class GoogleMapComponent {
google: any;
@ViewChild(“map”) mapElement;
map:any;

constructor() {

}

ngOnInit(){
	this.initMap();
}

initMap(){
	let coords = new google.maps.LatLng(37.992667,-1.1146491);
	let mapOptions: google.maps.MapOtpions= {
		center: coords,
		zoom: 17,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	this.map = new google.maps.Map(this.mapElement.nativeElement,
	mapOptions)

	
}

}

error:::

typescript: …/src/components/google-map/google-map.ts, line: 22
Cannot find name ‘google’. Did you mean the instance member ‘this.google’?

  L21:  initMap(){
  L22:      let coords = new google.maps.LatLng(37.992667,-1.1146491);
  L23:      let mapOptions: google.maps.MapOtpions= {

i just noticed that i am using Ionic , not ionic --v2. Could that be a problem?

2

Hello,

you have declared a variable named google as any inside a class. Thats all, (as far as I see) but I assume you want that the variable named google should represent something that have .maps…

Maybe you should do that or you decare it ouside like
declare var google;
in hope that magic late binding finds something matching.

Maybe this tutorial helps.

Best regards, anna-liebt

3

You should use a Service to load the Maps API.

See:

Also see:

For example:

import {} from '@types/googlemaps';

...

  public ngOnInit() {

    this.mapsApiLoaderService.load().then(res => {
      this.loadMap();
    });
  }

  private loadMap() {

    const opts: google.maps.MapOptions = {
      ...
      center: new google.maps.LatLng(this.currentPosition.latitude, this.currentPosition.longitude),
      ...
    };

    ...
  }
4

Thanks for linking to my tutorial @anna_liebt, but I would recommend this one instead which is much more recent: https://www.joshmorony.com/using-google-maps-and-geolocation-in-ionic-with-capacitor/

5

OK, so i have to put the ‘declare var google;’ outside , ok will try

now i am using a button windows.open(‘https://www.google.es/maps’,’_server’)

6

It’s better to just install the types for Google maps: npm install @types/googlemaps --save

Declaring the variable will work, but that’s basically just a way to ignore the types completely. Installing the types means you won’t need to add workaround code, and you get the benefit of using the appropriate types.

7

i just noticed that i am using Ionic , not ionic --v2. Could that be a problem?

8

No, the --v2 flag was used a long time ago to generate Ionic 2 projects instead of Ionic 1 projects. The current version of Ionic is 3, and there is no need to use a flag.

9

" ionic start helloWorld blank " = ionic 3 ?? ok nice

then i will try the tutorial you passed to me

10

Hello,
my english and my explenation are not the best, so I try mostly to link to people how can explain thinks better. You do a great job with your tutorials. Thanks for that.

Your new tutorial is newer, but it use capacitor which is not production ready (as you stated) Maybe this makes for the thread creator more confusing.

Best regards, anna-liebt.
Bytheway, I think I must look to a tutorial to create and integrate web components in my work.