Does Google Maps Javascript API works in Ionic 2?

Question

I hope all of you are Ok :)

I am developing a simple application in Ionic Framework with Google Maps (Map + Places SearchBox). The problem is that all works good until I try to search an address (i. e. Morena Blvd #1, San Diego, CA), the input is showing me the suggested addresses but when I choose one of them It never completes the text in my <ion-input> element...

It works very good in my browser when I run my app with ionic serve but not in my iPhone or Android device. Have you experienced any issue like that?

Here is my code (frontend):

<ion-content no-padding>
  <ion-searchbar #searchAddress id="searchAddress" [showCancelButton]="false" [(ngModel)]="address">
</ion-searchbar>

And this is my code to set the SearchBox instance to my ion-searchbar inner input control...

@ViewChild('searchAddress', {read: ElementRef}) searchElement: ElementRef;
...
...
...
...
let input = this.searchElement.nativeElement.querySelector('.searchbar-input');
let searchBox = new google.maps.places.SearchBox(input);

searchBox.addListener('places_changed', () => {
  let places = searchBox.getPlaces();

  if(!places && places.length === 0) return;

  this.address = places[0].formatted_address;
  this.latitude = places[0].geometry.location.lat();
  this.longitude = places[0].geometry.location.lng();

  if(places[0].address_components.length === 0) {
    this.street = places[0].address_components[1].long_name;
    this.selectedEstate = places[0].address_components[4].long_name;
  }
});

And it's running in my ionViewDidEnter() event

have you tried debugging in device inspector? maybe google is not defined on devices ( not loaded right ). — Andrei Alexandru, Jul 11 '17 at 02:25
Yes, and it is actually defined. The problem is when I click over a suggested place (the 'places_changed' event). Thanks for your response buddy — Juan Jose Adan, Jul 11 '17 at 03:25
Please take a look at my answer [here](https://stackoverflow.com/questions/38174997/angular-2-ionic-2-detect-if-an-object-was-modified/38180523#38180523). — sebaferreras, Jul 11 '17 at 05:10

score 1 · Accepted Answer · answered Jul 11 '17 at 03:49

Try wrapping everything inside your listener in an NgZone:

import { NgZone } from '@angular/core';

export class myPage {
  zone: NgZone;

  constructor() {
    this.zone = new NgZone({enableLongStackTrace: false});
  }

  ...

    searchBox.addListener('places_changed', () => {
      this.zone.run(() => {
        let places = searchBox.getPlaces();

        if(!places && places.length === 0) return;

        this.address = places[0].formatted_address;
        this.latitude = places[0].geometry.location.lat();
        this.longitude = places[0].geometry.location.lng();

        if(places[0].address_components.length === 0) {
          this.street = places[0].address_components[1].long_name;
          this.selectedEstate = places[0].address_components[4].long_name;
        }
      });
    });
}

If that works then it means that your listener-callback is executed outside the angular context, which means it does not trigger change detection and doesn't update the value. I had a similar problem once (only mobile phones affected) so it might be related to performance or efficiency optimizations to save battery life.

Does Google Maps Javascript API works in Ionic 2?

1 Answers1