Ionic - Google places and Autocomplete location

Question

I have work on the project on Ionic 2 and I have implemented the map so far, but I can not get out of that point. I needed to be shown the way I should go in order to add Google Place and Autocomplete to the project.

What can I do?

HTML:

<ion-row>   <ion-item>     <ion-label>Search</ion-label>     <ion-input id="places" type="text" name="search"></ion-input>        </ion-row> <div #map id="map"></div> 

HOME.ts

export class HomePage {  public latitude: number; public longitude: number;  @ViewChild('map') mapElement; map: any; marker: any; search: string;  constructor(public navCtrl: NavController, public platform: Platform) {  /*platform.ready().then(() => {   this.InitMap();  });*/ }  ionViewDidLoad(){  this.InitMap(); }  InitMap() {    this.setLocation();   let input = document.getElementById('places');   let autocomplete = new google.maps.places.Autocomplete(input);    google.maps.event.addListener(autocomplete, 'place_changed', () => {      let place = autocomplete.getPlace();     this.latitude = place.geometry.location.lat();     this.longitude = place.geometry.location.lng();     alert(this.latitude + ", " + this.longitude);     console.log(place);   });  }  setLocation() {    let latLng = new google.maps.LatLng(53.550513, 9.994241);   let mapOptions = {     center: latLng,     zoom: 15,     mapTypeId: google.maps.MapTypeId.ROADMAP   };    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);       this.marker = new google.maps.Marker({     position: latLng,     map: this.map,    });   }   } 

What is wrong? Thank's

Answer 1

SOLVED! After a long time I was able to find a solution to my problem. Here's the solution:

Home.html:

<ion-list>   <ion-item>     <ion-input (click)="showAddressModal()" [(ngModel)]="address.place"type="text" placeholder="Pick an address">              </ion-input>   </ion-item> </ion-list> 

Home.ts:

import {Component} from '@angular/core'; import {NavController, ModalController} from 'ionic-angular'; import {AutocompletePage} from './autocomplete';  @Component({   templateUrl: 'build/pages/home/home.html' })  export class HomePage {   address;    constructor(     private 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();   } } 

AutocompletePage.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" tappable   (click)="chooseItem(item)">       {{ item }}     </ion-item>   </ion-list> </ion-content> 

AutocompletePage.ts:

import {Component, NgZone} from '@angular/core'; import {ViewController} from 'ionic-angular';  @Component({   templateUrl: 'build/pages/home/autocomplete.html' })  export class AutocompletePage {   autocompleteItems;   autocomplete;    latitude: number = 0;   longitude: number = 0;   geo: any    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);     this.geo = item;     this.geoCode(this.geo);//convert Address to lat and long   }    updateSearch() {      if (this.autocomplete.query == '') {      this.autocompleteItems = [];      return;     }      let me = this;     this.service.getPlacePredictions({     input: this.autocomplete.query,     componentRestrictions: {       country: 'de'     }    }, (predictions, status) => {      me.autocompleteItems = [];     me.zone.run(() => {      if (predictions != null) {         predictions.forEach((prediction) => {           me.autocompleteItems.push(prediction.description);         });        }      });    });   }    //convert Address string to lat and long   geoCode(address:any) {     let geocoder = new google.maps.Geocoder();     geocoder.geocode({ 'address': address }, (results, status) => {     this.latitude = results[0].geometry.location.lat();     this.longitude = results[0].geometry.location.lng();     alert("lat: " + this.latitude + ", long: " + this.longitude);    });  } }