I have an ionic project in which I am trying to get the error message "Cannot find name 'google'." to go away. I have tried putting the google maps api script in the head as well as the foot of the page, installing the ionic native google maps package, typings install dt~google.maps --global...What is strange is that the modal is functioning (see picture), but I first need to close an error window. One idea that I have is that I tried to run npm install @types/googlemaps --save-dev but I got the error messages:
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] requires a peer of [email protected] but none was installed.
I first have to close an error window like the following in order to see that modal, so Google must be loading.
The code that I got is from the following tutorial, where a few other people seem to have had similar issues: http://devfanaticblog.com/google-maps-autocomplete-for-ionic-2-applications/
index.html I've included this in the head:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=my_api_key&libraries=places"></script>
home.ts
import { NavController, ModalController} from 'ionic-angular';
import { Component } from '@angular/core';
import {AutocompletePage} from './autocomplete';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public address;
constructor(public navCtrl: NavController, private modalCtrl: ModalController) {
this.address = {
place: ''
};
}
showAddressModal () {
let modal = this.modalCtrl.create(AutocompletePage);
let me = this;
modal.onDidDismiss(data => {
this.address.place = data;
});
modal.present();
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item>
<ion-label color="primary" stacked>Location</ion-label>
<ion-input (click)="showAddressModal()" [(ngModel)]="address.place" type="text" placeholder="Enter Pickup Address"></ion-input>
</ion-item>
</ion-list>
</ion-content>
autocomplete.ts
import {Component, NgZone} from '@angular/core';
import {ViewController} from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';
@Component({
templateUrl: './autocomplete.html'
})
export class AutocompletePage {
public autocompleteItems;
public autocomplete;
public service = new google.maps.places.AutocompleteService();
constructor (public viewCtrl: ViewController, private zone: NgZone) {
this.autocompleteItems = [];
this.autocomplete = {
query: ''
};
}
dismiss() {
this.viewCtrl.dismiss();
}
chooseItem(item: any) {
this.viewCtrl.dismiss(item);
}
updateSearch() {
if (this.autocomplete.query == '') {
this.autocompleteItems = [];
return;
}
let me = this;
this.service.getPlacePredictions({ input: this.autocomplete.query, componentRestrictions: {country: 'US'} }, function (predictions, status) {
me.autocompleteItems = [];
me.zone.run(function () {
predictions.forEach(function (prediction) {
me.autocompleteItems.push(prediction.description);
});
});
});
}
}
autocomplete.html
<ion-header>
<ion-toolbar>
<ion-title>Enter address</ion-title>
<ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()"></ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of autocompleteItems" autofocus tappable (click)="chooseItem(item)">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
Other relevant links that I've reviewed:
- https://forum.ionicframework.com/t/google-maps-typescript-error-cannot-find-name-google-discussion/49990
- https://forum.ionicframework.com/t/google-places-autocomplete-on-an-ion-input-component-in-ionic-2/52890
- Ionic 2 - Google places and Autocomplete location
- https://ionicallyspeaking.com/2016/06/07/google-places-autocomplete-and-ionic-2/
- https://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/
- https://github.com/guillefd/ionic2-google-maps-autocomplete/
- How to install Typescript typings for google maps
- https://ionicframework.com/docs/native/google-maps/
- https://github.com/mapsplugin/cordova-plugin-googlemaps
