/ionic2-google-maps-autocomplete

Implementation of Google Maps Autocomplete in Ionic 2 (Ionic 2 RC2 + Google Maps JS SDK)

Primary LanguageTypeScript

Google Maps Places Autocomplete for Ionic 2

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

image

Google Maps Libraries implemented

Dataflow implementation

Open the menu and tap "Autocomplete Page"

  1. a map is initiated at the top
  2. click address input, a "Modal" page opens
  3. In modal page:
    • start typing an address in the searchbox
    • below the searchbox a list of addresses is autocompleted with the API predictions
  4. tap an item of the list to choose an address, modal will close
  5. 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

// 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:

Enjoy.