Most of the mobile application uses the Google Map Places Search API. In this tutorial, you will learn, how to setup the Google Map Places Search API in the Ionic 2 project and preview the result in your Browser,  Android, and iOS application. 

Google Map Search in the Browser.

Google Map Search in the Android Device(Genymotion emulator).

Google Map Search in the iOS Device(Xcode Simulator iPhone SE).


Enough. No theory. Let's start the project.

Create a new Ionic 2 project using

ionic start googleMapPlaceSearch blank --v2

Then install the Google Map library using

cd googleMapPlaceSearch
npm install @types/googlemaps --save-dev

Now go to the node_modules -> @types -> googlemaps folder. Add the below line

declare module 'googlemaps';

in the first line of the index.d.ts file.

Then import the googlemaps class to the home.ts file.

import {googlemaps} from 'googlemaps';

We are not using the Native Google Map class. So there is no need to include the Google Map class in the app.module.ts file.

The full source code of home.ts.


import { NavController } from 'ionic-angular';

import { Component, OnInit } from '@angular/core';


import {googlemaps} from 'googlemaps';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit{

autocompleteItems: any;
autocomplete: any;
acService:any;
placesService: any;

constructor() { 
}

ngOnInit() {
this.acService = new google.maps.places.AutocompleteService();        
this.autocompleteItems = [];
this.autocomplete = {
query: ''
};        
}



updateSearch() {
console.log('modal > updateSearch');
if (this.autocomplete.query == '') {
this.autocompleteItems = [];
return;
}
let self = this; 
let config = { 
//types:  ['geocode'], // other types available in the API: 'establishment', 'regions', and 'cities'
input: this.autocomplete.query, 
componentRestrictions: {  } 
}
this.acService.getPlacePredictions(config, function (predictions, status) {
console.log('modal > getPlacePredictions > status > ', status);
self.autocompleteItems = [];            
predictions.forEach(function (prediction) {              
self.autocompleteItems.push(prediction);
});
});
}

}

Then add the search component in the home.html.

<ion-header>
<ion-navbar color="secondary">
<ion-title>Search address</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding> 
<ion-searchbar 
[(ngModel)]="autocomplete.query" 
[showCancelButton]="true" 
(ionInput)="updateSearch()" 
(ionCancel)="dismiss()"
placeholder="Start typing and select ...">
</ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of autocompleteItems" 
(click)="chooseItem(item)">
{{ item.description }}
</ion-item>
</ion-list>
</ion-content>


The Ionic search bar will call the updatesearch() function, whenever the user types something. The updatesearch() function will call the Google Map Place Search API and returns the result. And the result will be displayed using the autocompleteItems variable.

This tutorial uses the Google Map js library to retrieve inform about the places. So include the Google Map js file in the index.html file of www folder.

<script src="http://maps.google.com/maps/api/js?key=XXXXX"></script>

The above script needs the Google Map API Key. Go to the Google console using

https://console.developers.google.com/

Create a new google project by clicking the create project


Give a name for your project

Once you created a new project, it will redirect you to the API section. Click the Google Maps Javascript API

Click the Enable API

Then click the create credentials

Then click the what credentials do I need?

That's all. It will give you the Google Map API Key. Replace the XXXXX with your key.

<script src="http://maps.google.com/maps/api/js?key=XXXXX"></script>

To run the application in Android emulator use the below command.

ionic platform add android

ionic run android

To view the application in iOS emulator use

ionic platform add ios
ionic run ios

Below is the Ionic software information, while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1