aurelia-plugins-google-places-autocomplete

A Google Places Autocomplete plugin for Aurelia.

This plugin is a custom element build with the Google Places AutocompleteService instead of the Google Places Autocomplete class. You can use this plugin easily in a form and don't have to deal with the asynchronous placed_changed event. Simply bind a value to the element to get the value of the input in your form. The downside is that you still need to do your own geocoding if you want to have geographic coordinates of the address. Luckily, this can be easily done with the Google Geocoder.

Make sure you have the Google Places API Web Service activated in the Google API Console.

Installation

Webpack/Aurelia CLI

``shell
npm install aurelia-plugins-google-places-autocomplete --save
`

When using Aurelia CLI add the following dependency to aurelia.json as described in the documentation:

`json
{
"name": "aurelia-plugins-google-places-autocomplete",
"path": "../node_modules/aurelia-plugins-google-places-autocomplete/dist/amd",
"main": "aurelia-plugins-google-places-autocomplete"
}
`

Add node_modules/babel-polyfill/dist/polyfill.min.js to the prepend list in aurelia.json. Do not forgot to add babel-polyfill to the dependencies in package.json.

For projects using Webpack, please add babel-polyfill to your webpack.config.js as documented by babeljs.io.

JSPM

`shell
jspm install aurelia-plugins-google-places-autocomplete
`

Bower

`shell
bower install aurelia-plugins-google-places-autocomplete
`

Configuration

Inside of your main.js or main.ts file simply load the plugin inside of the configure method using .plugin().

`javascript
import {PLATFORM} from 'aurelia-framework';

export async function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();

aurelia.use
.plugin(PLATFORM.moduleName('aurelia-plugins-google-places-autocomplete'), config => {
config.options({
apiScriptLoadedEvent: 'aurelia-plugins:google-maps:api-script-loaded', // if loadApiScript is false, the event that is subscribed to, to know when the Google Maps API is loaded by another plugin
key: '', // your Google API key retrieved from the Google Developer Console
language: 'nl', // see https://developers.google.com/maps/documentation/javascript/localization
libraries: 'places', // see https://developers.google.com/maps/documentation/javascript/libraries
loadApiScript: true|false, // whether or not the