Google Maps Autocomplete for Ionic 2 applications

acw_overlayAddress input is quite common task appearing during mobile apps development. Ionic doesn’t have such built-in component, but we can develop it quickly and easily. This component can be used not only for address autocomplete, but can also be used for any other autocomplete type.

First of all, install Ionic 2 and start a new project.

We’re writing an Ionic 2 app in TypeScript. But we don’t have the typescript definitions for google maps API. First of all, we’ll need to install them.
First of all you’ll need to install typings globally:

And run the following command from your newly started ionic project folder to install
typings for Google Maps JS SDK:

Now we have everything prepared, let’s start!

We need to include Google Maps API in our index.html to be able to access this library:

Than we’ll add the our address input field to component template where we want to have it.

Here we have two interesting things:

(click)="showAddressModal()" this will run showAddressModal function after click on our input. This function will show our autocomplete component.
[(ngModel)]="address.place" this provides us two-way binding between the address object and our input field.

Our component which will contain an autocomplete field will look like the following:

Here we’re importing the AutocompletePage component. It’s not exists right now, we’ll create it during the next step. Also we’re importing the ModalController component. It’s Ionic 2 built-in component which handles modal windows.
In the component constructor we’re initializing our component address property, filling an initial address with blank string.
The most interesting thing is the showAddressModal function. It’s create new modal controller passing it our AutocompletePage component. This component will be shown as modal content.
We’re specifying the function which will be called after modal close using the modal.onDidDismiss method. Using our AutocompletePage component we can close the modal window and pass some params to this function. And we’ll pass the only one param – selected address.
And the last thing we’re doing is showing the modal using modal.present() method. That’s all we need to use Autocomplete window in our Ionic 2 app.

Now it’s time to create the AutocompletePage component itself. It’s template will look like any Ionic page template:

Here we’re using the ion-searchbar component for address input. It has two event bindings – ionInput which triggers on input text change and ionCancel which triggers on ‘cancel’ button press. [(ngModel)] provides the two-way data binding between the template and component class.

Inside the content we’re displaying the search results as simple Ionic 2 list. The only thing is what we’re using (click) handler to call chooseItem component function. This function will close the modal and send selected address to the parent page component.

AutocompletePage component code is also not too complicated:

We have 3 component properties:

autocompleteItems. This is suggestions list got from Google service. We’ll dislay it as ionic list.
autocomplete This is an object which will contain the user input.
service This is Google Directions service instance which will be used to get Autocomplete suggestions list.

Component constructor simply initializes everything with blank values and to inject some required components.
dismiss method is used to close the modal window on ‘cancel’ button click.
chooseItem method is doing the same job, but also sending the choosen item value to the parent component.
updateSearch is the most complex method which queries the Google Autocomplete service (please be careful with copy-paste, search is restricted to Thailand) and populates the autocompleteItems array with received suggestions list. The better way is to use Service for such functionality, but now I’m trying to keep everything as simple as possible. Here we’re also using zone.run method. I cannot explain this briefly and it’s out of this post theme, so I’ll just leave this and this links here.

That’s all, working copy of Google Maps Autocomplete for Ionic 2 app you can download from Github.

29 thoughts on “Google Maps Autocomplete for Ionic 2 applications”

  1. Thanks for great tutorial!!

    How do i get co-ordinates and other data for place selected.

     

    Thanks a lot

    Kunal

  2. thanks for the tutorial, it really helped. Made a repo with a full working example, got you on credits. https://github.com/guillefd/ionic2-google-maps-autocomplete/

  3. Hello,

    Have you tried this with an IOS phone? I implemented the google place  autocomplete following the guides they provide and it works perfecly in browser and android phone but not the iphone. I have googled abit and it seems that the fastclick is an issue. I havent tried your implementation but i was wondering if you were getting the same issue :).

  4. Thanks for the great post.

    One issue i am facing.

    this.viewCtrl.dismiss(item); it is removing everything from screen after clicking on any item.

    Please help

  5. Hi,

    I get following error with v2/rc3

     

    Don’t we need to register types at somewhere?

  6. Hi,

    Thank you a lot for this tutorial. I see in this way , we have to include the google place api which is a js library. But i am looking for a native way to do that, like the codovar plugin google map. Would you please show me any native way to do that.

    Thank you very much

     

  7. The resource from “http://localhost:8100/build/main.css” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
    The resource from “http://localhost:8100/build/main.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
    can u plzz help me out?

  8. How would I go about doing this without a seperate modal? Would it be too clunky to do it that way?

    1. The current approach is the most common one. Doing this without a modal will result on suggestions override by virtual keyboard on many scroll positions, which is not good for user experience.

  9. Hello, and thanks for the tutorial!

    I’ve gotten everything to work, however I am having a hard time figuring out why the app is crashing when no locations are found. Running using ionic serve I’m able to bring up the modal, find some places, but when I type something that isn’t considered a location I get an immediate error.

    Whats the best way to catch this exception? Did I miss something somewhere?

    I’m able to “sort of” catch it like so:

    Also, is there a way to call a “showAlert()” function using “this.showAlert from within “this.service…” function?

    I’m using a sidemenu starter ionic projectas my base…

     

    Cheers!

     

     

  10. Alternatively, I just noticed I’m also getting this error:

     

    You know what the issue may be, also?

    1. Don’t worry, it’s just a warning. But you can remove let me = this; line to avoid it.

  11. Hey. Thanks a lot for this tutorial.I learned a lot from it. I’m quite new to ionic2. Can you please tell me how do I use it for any other autocomplete type as you’ve mentioned in the beginning of this tutorial ? I don’t require google maps rather I want a autocomplete for my own user data which has got nothing to do with the google maps places.

    Thank in advance.

    1. Hi, you have to look into updateSearch method of AutocompletePage component. It retrieves data from Google API:

      this.service.getPlacePredictions({ input: this.autocomplete.query, componentRestrictions: {country: ‘TH’} }, function (predictions, status) {
      me.autocompleteItems = [];
      me.zone.run(function () {
      predictions.forEach(function (prediction) {
      me.autocompleteItems.push(prediction.description);
      });
      });
      });
      So you need to replace this code with your own which will work with your API

  12. thank you so much sir,this helped me lot. I need another help i’m  building a app using ionic2 in my app user selects a city through listview provided in app so how to map user selected city to his current location using google-map …i searched a lot but i didnt get a proper solution for that ……if you know anything i request you kindly let me know or  you can share any link regarding this …it will be a life saver for me
    thanks a lot .

  13. If you are getting the error that the application can’t find google, try adding

    declare module ‘googlemaps’;

    in declarations.d.ts if you are using Ionic 2+

Leave a Reply

Your email address will not be published. Required fields are marked *