Google Places Autocomplete With Ionic Framework

Google Places Autocomplete with Ionic
If you need to setup an address field with address input, autocomplete can be a good idea. But the better idea can be to use Google Places API for that. Unfortunately, Google Places autocomplete doesn’t works out of box with Ionic framework. I developed the simple directive which can replace default autocomplete behaviour and works with Ionic framework like charm.

Here is an update for Ionic 2

Project GitHub/Download

Live Demo

This directive uses Google Maps Autocomplete Service API to retrieve predictions list. It searches (by default) within 1500km radius from current user location (if detected). Later I’m planning to set this feature optional and add some other useful settings.

Use of this directive is quite easy:

Inject ‘ion-place-tools’ module into your project, for example:

Add ion-place-autocomplete.js and ion-place-autocomplete.css to your project:

Use directive as following

LocationChanged event handler can be specified. This handler will be fired when user selects any of suggested options. Address string will be the only parameter for now. You can see how it works with demo.

This Directive doesn’t return coords for now, but you can use Google Geocoder to determine coords by address, for example:

 

9 thoughts on “Google Places Autocomplete With Ionic Framework”

  1. Hi there,

    I think that external scripts would be rejected in Apple Store for review, while it using

    <script type=“text/javascript” src=“https://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=false”></script>

    I want to make sure it is appropriate

    1. I have at least 3 apps already approved by Apple which are using such tags. Declining apps for this reason is stupid, because in any case using your cordova app you can load any JS code via http call and use with ‘eval’ function.

  2. Hey I really liked this idea of autocomplete, but I’m getting an error when I try your approach.

    Right when the view loads I get ” Expression ‘undefined’ in attribute ‘radius’ used with directive ‘ionGooglePlace’ is non-assignable!”

    and when I type into the address input I get “Error: Missing parameter. You must specify radius”.

    Any ideas on that?

  3. Do I need a Google API Key for a high traffic app?  If yes, the where in the code it would go?

  4. Also, is there a way to limit it by business type.  For example Restaurant.  I am using Ionic 1.  Thanks

  5. hi,

    i’m navitha.. using this code the auto fill is open as a modal.. i need to open the list of location within the text box only ( like your output).. can u help me…

     

Leave a Reply

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