Tag Archives: google places

Google Places Autocomplete and Ionic 2

The Google Places Autocomplete service is a useful service if you want to add location autocomplete to your app.  Recently I needed this in an Ionic 2 app I was developing.

What is the Google Places Autocomplete service?  From the Google Places website:

The Place Autocomplete service is a web service that returns place predictions in response to an HTTP request. The request specifies a textual search string and optional geographic bounds. The service can be used to provide autocomplete functionality for text-based geographic searches, by returning places such as businesses, addresses and points of interest as a user types.

Using the service in your Ionic 2 app is very easy:

In your index.html add the following line:

<script type=text/javascript src=http://maps.googleapis.com/maps/api/js?key=yourkey&amp;libraries=places></script>

replace yourkey with your own Google Maps API key which you generate via the Google API Console.

On a component’s HTML page add the fields you want to use for the autocomplete (in this example I have two, a FROM field and a TO field:

<p class = “label”>From</p>
<input (focus)=”clearFrom()” id=”journey_from” name=”journey_from” type=”text” placeholder=”Enter location”[(ngModel)]=”fromValue”>
<p class = “label”>To</p>
<input (focus)=”clearTo()” id=”journey_to” name=”journey_to” type=”text” placeholder=”Enter location”[(ngModel)]=”toValue”>

In your component (this example used Typescript) define the model values:

fromValue:string;

toValue:string;

and in the constructor initialise them:

this.fromValue = “”;
this.toValue = “”;

Then add an ngOnit() method that setups up autocomplete service listeners against both fields:

ngOnInit(){

// get the two fields
let input_from = (<HTMLInputElement>document.getElementById(“journey_from”));
let input_to = (<HTMLInputElement>document.getElementById(“journey_to”));

// set the options
let options = {
types: [],
componentRestrictions: {country: “uk”}
};

// create the two autocompletes on the from and to fields
let autocomplete1 = new google.maps.places.Autocomplete(input_from, options);
let autocomplete2 = new google.maps.places.Autocomplete(input_to, options);

// we need to save a reference to this as we lose it in the callbacks
let self = this;

// add the first listener
google.maps.event.addListener(autocomplete1, ‘place_changed’, function() {

let place = autocomplete1.getPlace();
let geometry = place.geometry;
if ((geometry) !== undefined) {

console.log(place.name);

console.log(geometry.location.lng());

console.log(geometry.location.lat());

});

// add the second listener
google.maps.event.addListener(autocomplete2, ‘place_changed’, function() {
let place = autocomplete2.getPlace();
let geometry = place.geometry;

if ((geometry) !== undefined) {

console.log(place.name);

console.log(geometry.location.lng());

console.log(geometry.location.lat());

});

});

}

That’s all there is to it – you should now be able to see google place names appear when you type in either of those fields – and see the selected item’s attributes written to the console.

 


I’m a mobile applications developer based in the UK, concentrating primarily on hybrid application development with Ionic and Ionic 2 but also with native development skills. Please visit www.crossplatformsolutions.co.uk for more information about me and how I may be able to help you with mobile application development, particularly with Ionic 2 but also with other mobile frameworks and technologies.  Thanks for visiting.