Google Maps Places Autocomplete for Ionic 2

Basic implementation of Google Maps API Autocomplete for Ionic 2
using methods getPlacePredictions() Places Library

Google Maps Libraries implemented

AutocompleteService class
google.maps.places.AutocompleteService.getPlacePredictions()
PlacesService class
google.maps.places.PlacesService.getDetails()
Map class
google.maps.Map
Marker class
google.maps.Marker

Dataflow implementation

Open the menu and tap "Autocomplete Page"

a map is initiated at the top
click address input, a "Modal" page opens
In modal page:
- start typing an address in the searchbox
- below the searchbox a list of addresses is autocompleted with the API predictions
tap an item of the list to choose an address, modal will close
back in the "Autocomplete Page":
- place_id is read from the item selected
- getDetails() is called to get all the address details
- address components are populated in the page
- the map is centered with the new address
- a marker is added to the map at the new address

Installation

install ionic, cordova and dependencies

$ npm install -g ionic cordova
$ npm install

setup Google Maps API
if don´t have one, get a google maps API
then open src/index.html

// paste your Google API in line 27  
...
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR-API-KEY&libraries=places"></script>
...

setup map init lat/lng

the map latitude/longitude center point
open src/pages/page-gmap-autocomplete/page-gmap-autocomplete.ts

// change lat/ln (line 98)
...
private initMap() {
  var point = {lat: -34.603684, lng: -58.381559}; // actual: Buenos Aires
...

setup country restrictions

this will restrict the api search to the country selected
open src/pages/modal-autocomplete-items/modal-autocomplete-items.ts

// change country code to one of your choice (line 47)
...
let config = { 
  types:  ['geocode'],
    input: this.autocomplete.query, 
    componentRestrictions: { country: 'AR' }  // actual: Argentina 
  }
...

Test

web browser

$ ionic serve

android

$ ionic run android

Environment

This implementation was tested with the following environment

$ ionic info

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.7
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v4.2.2
Xcode version: Not installed

CHANGELOG

2016/11/17 package.json update Update Ionic to RC3 > "ionic-angular": "2.0.0-rc.3"
Update Ionic App Scripts > "@ionic/app-scripts": "^0.0.45"
Update zone.js > "zone.js": "0.6.26"
2016/11/07
package.json update
Update to Ionic 2 RC2
Update Ionic App Scripts to 0.0.41
2016/10/25
first commit, basic implementation Ionic 2 RC1 Ionic App Scripts 0.0.36

Credits

Based on the following posts:

DevFanatic by @ivanthecrazy http://devfanaticblog.com/google-maps-autocomplete-for-ionic-2-applications/
Ionically Speaking by @RichardShergold https://ionicallyspeaking.com/2016/06/07/google-places-autocomplete-and-ionic-2/

Enjoy.

petivagyok16 / ionic2-google-maps-autocomplete