when I were implementing in my ionic 3 project I have been included google maps in it after I set all the steps were necessary for use maps correctly in ionic 3
(page : google maps with searching in search bar)
my typescript code for mapping is :
import { Component, ElementRef, ViewChild, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform, ViewController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMapsProvider } from '../../providers/google-maps/google-maps';
declare var google ;
@IonicPage()
@Component({
selector: 'page-map2',
templateUrl: 'map2.html',
})
export class Map2Page {
@ViewChild('map') mapElement: ElementRef;
@ViewChild('pleaseConnect') pleaseConnect: ElementRef;
latitude: number;
longitude: number;
autocompleteService: any;
placesService: any;
query: string = '';
places: any = [];
searchDisabled: boolean;
saveDisabled: boolean;
location: any;
constructor(public navCtrl: NavController, public zone: NgZone, public maps: GoogleMapsProvider, public platform: Platform, public geolocation: Geolocation, public viewCtrl: ViewController) {
this.searchDisabled = true;
this.saveDisabled = true;
}
ionViewDidLoad(): void {
let mapLoaded = this.maps.init(this.mapElement.nativeElement, this.pleaseConnect.nativeElement).then(() => {
this.autocompleteService = new google.maps.places.AutocompleteService();
this.placesService = new google.maps.places.PlacesService(this.maps.map);
this.searchDisabled = false;
});
}
selectPlace(place){
this.places = [];
let location = {
lat: null,
lng: null,
name: place.name
};
this.placesService.getDetails({placeId: place.place_id}, (details) => {
this.zone.run(() => {
location.name = details.name;
location.lat = details.geometry.location.lat();
location.lng = details.geometry.location.lng();
this.saveDisabled = false;
this.maps.map.setCenter({lat: location.lat, lng: location.lng});
this.location = location;
});
});
}
searchPlace(){
this.saveDisabled = true;
if(this.query.length > 0 && !this.searchDisabled) {
let config = {
types: ['geocode'],
input: this.query
}
this.autocompleteService.getPlacePredictions(config, (predictions, status) => {
if(status == google.maps.places.PlacesServiceStatus.OK && predictions){
this.places = [];
predictions.forEach((prediction) => {
this.places.push(prediction);
});
}
});
} else {
this.places = [];
}
}
save(){
this.viewCtrl.dismiss(this.location);
}
close(){
this.viewCtrl.dismiss();
}
}
and my html code for this page is :
<ion-header>
<ion-navbar color="primary">
<ion-buttons left>
Cancel
<ion-buttons right>
<button [disabled]="saveDisabled" ion-button (click)="save()">Save
<ion-toolbar>
<ion-searchbar [(ngModel)]="query" (ionInput)="searchPlace()">
<ion-list>
<ion-item *ngFor="let place of places" (touchstart)="selectPlace(place)">{{place.description}}
<ion-content>
Please connect to the Internet...
<ion-spinner>
my issue that when I go to test the code and view the results it give me an error which is :
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'innerHTML' of undefined
TypeError: Cannot read property 'innerHTML' of undefined
at Object._.QA (util.js:19)
at l$.attributionText_changed (places_impl.js:40)
at Rc (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:50)
at l$._.J.bindTo (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:118)
at Object.m$.f (places_impl.js:40)
at yw.<anonymous> (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:146)
at Object._.Q (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:62)
at new yw (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:146)
at map2.ts:37
at t.invoke (polyfills.js:3)
at Object._.QA (util.js:19)
at l$.attributionText_changed (places_impl.js:40)
at Rc (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:50)
at l$._.J.bindTo (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:118)
at Object.m$.f (places_impl.js:40)
at yw.<anonymous> (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:146)
at Object._.Q (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:62)
at new yw (js?key=AIzaSyCfydQz_KdwPVD98a8jMWG3DxB_H-EvJ8U&libraries=places:146)
at map2.ts:37
at t.invoke (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at Object.onInvokeTask (core.js:4620)
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at <anonymous>
the line 37 in ts code which look like its the reason of error is this line :
this.placesService = new google.maps.places.PlacesService(this.maps.map);
I have searched for this error but I can't find a solution , specially it occurs in a code for implementing google maps
what is the solution of that error , please
and there is another question around the subject of google maps .. Is there a way to get the information about places from google maps and show it in the project on a special alert or toast or modal or something like that ? (the mean point it to get the data into the project from google maps)
Thanks at all
What I have tried:
I don't try anything till now , I ask for help for my graduation project