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.
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:
|
1 |
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=false"></script> |
Inject ‘ion-place-tools’ module into your project, for example:
|
1 |
angular.module('ionicApp', ['ionic', 'ion-place-tools']); |
Add ion-place-autocomplete.js and ion-place-autocomplete.css to your project:
|
1 2 |
<link href="vendor/ion-place-autocomplete.css" rel="stylesheet"> <script src="vendor/ion-place-autocomplete.js"></script> |
Use directive as following
|
1 |
<ion-google-place placeholder="Your address" ng-model="yourModel" location-changed="yourLocationChangeCallback"/> |
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:
|
1 2 3 4 5 6 7 8 9 10 |
var geocoder = new google.maps.Geocoder(); geocoder.geocode({ address: addressFromEventHandler }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { q.resolve(results); } else { q.reject(); } }); |
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
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.
Cheers!
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?
Do I need a Google API Key for a high traffic app? If yes, the where in the code it would go?
You need API Key for any type of app. You can get it here: https://console.developers.google.com
Also, is there a way to limit it by business type. For example Restaurant. I am using Ionic 1. Thanks
I guess there is something similar. Please refer to the Google Places API
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…
Hi DevFanatic. thx for the write up but there is a big security concern I have.
How do you restrict the api access if doing it in production app?
Do you think anybody really need your api key? It’s just easier to signup with Google and get a new one.
If you’re concerned, you could try to proxy google maps script URL via your server (for ex http://example.com/gmaps.js, which will fetch actual JS from google using your API key).