Angular2/ionic2 angular2-google-maps error Cannot find name 'google'

Question

I followed the this example (click here) to make a field of address with autocompletion of google map Places,

But it's giving the following error:

Can not find name 'google'.

L53: this.mapsAPILoader.load (). Then (() => {

L54: let autocomplete = new google.maps.places.Autocomplete 
(this.searchElementRef.nativeElement, {

I tried to install google-maps types npm install --save @types/google-maps but it is without results.

After installing @types/google-maps the build is ok but when I luanch i have this error :

Cannot find name 'google' after installing @types/google-maps

My Code :

import { FormControl } from '@angular/forms';
import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { MapsAPILoader } from 'angular2-google-maps/core';


@Component({
  selector: 'page-page2',
  templateUrl: 'page2.html'
})
export class Page2 implements OnInit {

  latitude: number = 51.678418;
  longitude: number = 7.809007;
  zoom: number = 4;

  searchControl: FormControl;

  @ViewChild("search")
  searchElementRef: ElementRef;

  constructor(public navCtrl: NavController, public navParams: NavParams, private mapsAPILoader: MapsAPILoader) {
// some not related to this question code
  }

  ngOnInit() {
    //create search FormControl
    this.searchControl = new FormControl();

    //set current position
    this.setCurrentPosition();

    //load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });
      autocomplete.addListener("place_changed", () => {
        //get the place result
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();

        //set latitude and longitude
        this.latitude = place.geometry.location.lat();
        this.longitude = place.geometry.location.lng();
      });
    });
  }

  private setCurrentPosition() {
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 12;
      });
    }
  }

}

what happens when you place declare var google; under your imports and above your @Component({}) ? And please provide us with some code — Ivafo
– Ivafo, Commented Nov 24, 2016 at 12:26
I've already done that. I get the following error i.sstatic.net/gPZzD.png — BeliliF
– BeliliF, Commented Nov 24, 2016 at 13:56

Ivafo · Accepted Answer · 2016-11-24 14:06:13Z

2

Run typings install dt~google.maps --global

as found here

answered Nov 24, 2016 at 14:06

Ivafo

7,72910 gold badges61 silver badges101 bronze badges

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

1 Comment

BeliliF Over a year ago

For me the problem is resolved after the execution of these two instructions which you have given me : 1. npm install --save @types/google-maps 2. typings install dt~google.maps --global Thank you @Ivaro18

Collectives™ on Stack Overflow

Angular2/ionic2 angular2-google-maps error Cannot find name 'google'

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related