Click here to Skip to main content
15,868,419 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Posted
Comments
Patrice T 24-Mar-18 15:03pm    
Where is the position of error in this code ?
Member 13744702 25-Mar-18 14:07pm    
in this line bro => this.placesService = new google.maps.places.PlacesService(this.maps.map);
Richard MacCutchan 25-Mar-18 3:38am    
The error is quite clear; you are trying to access a property of an object that does not exist. Look at the lines of code before the error to see why the reference is void.
Member 13744702 25-Mar-18 14:08pm    
I see , but can you suggest me a solution :/ what should I do bro ?
Richard MacCutchan 26-Mar-18 3:36am    
You should find out exactly which item is null, and why.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900