Ionic 2 - Google places and Autocomplete

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?


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


  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(() => {

InitMap() {

 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 =;
   this.longitude = place.geometry.location.lng();
   alert(this.latitude + ", " + this.longitude);


setLocation() {

 let latLng = new google.maps.LatLng(53.550513, 9.994241);
 let mapOptions = {
 center: latLng,
 zoom: 15,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}; = new google.maps.Map(this.mapElement.nativeElement, mapOptions);    
this.marker = new google.maps.Marker({
position: latLng,


What is wrong?

Can anyone help me?
This is the official Forum of the Ionic Framework right?


yep right this is the official forum of ionic.

have you looked to this before? Google Places Autocomplete on an ion-input component in Ionic

Hi alaa_alshamey,
Thanks for your suggestion. I solved the problem here: Ionic 2 - Google places and Autocomplete

happy to hear that :slight_smile: Good Luck