# aurelia-place-picker

> A place picker inspired by the 'Autocomplete places with Aurelia.io' blog by François Wouts

Latest version **0.0.10** (published 2016-05-19) · CC0-1.0 license · 0 weekly downloads

## Install

```sh
npm install aurelia-place-picker
pnpm add aurelia-place-picker
yarn add aurelia-place-picker
bun add aurelia-place-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.10 |
| Published | 2016-05-19 |
| First published | 2016-04-19 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Thomas Seberechts |
| Maintainers | tseberechts |
| Keywords | aurelia, plugin, skeleton |

## Links

- npm: https://www.npmjs.com/package/aurelia-place-picker
- Repository: https://github.com/Tseberechts/aurelia-place-picker
- Homepage: http://github.com/Tseberechts
- Issues: https://github.com/Tseberechts/aurelia-place-picker/issues
- npm.io page: https://npm.io/package/aurelia-place-picker

## Recent versions

- 0.0.10 (latest) — 2016-05-19
- 0.0.9 — 2016-05-19
- 0.0.8 — 2016-05-19
- 0.0.7 — 2016-05-17
- 0.0.6 — 2016-04-19
- 0.0.5 — 2016-04-19
- 0.0.4 — 2016-04-19
- 0.0.3 — 2016-04-19
- 0.0.2 — 2016-04-19
- 0.0.1 — 2016-04-19

## README

# Aurelia-place-picker

This aurelia plugin is a wrapper around the google.maps.places.autocomplete. It renders a searchbox and returns an object with the placename, latitude and longitude coordinates

See the example: [here](http://github.com/Tseberechts/aurelia-place-picker-example);
The inspiration: [here](http://blog.thecoderecipe.com/articles/aurelia/places/2015/12/06/aurelia-places-autocomplete.html);

## Installation

```shell
jspm install npm:aurelia-place-picker
```

Or for webpack:

```shell
npm install aurelia-place-picker
```


## Usage

In your main.js:

```javascript
.plugin('aurelia-place-picker', config => {
      config.options({
      apiKey: '[YOUR API KEY HERE]',          //Required
      getAPI: true,                           //Optional, see 'Problems'
      apiLoadedEvent: 'googlemap:api:loaded'  //Optional, see 'Problems'
    });
```

Then in your HTML:

```html
<place-picker location.bind="location"></place-picker>
```

And finally the CSS:

```css
.aurelia-place-picker{
 [YOUR STYLE HERE]
}
```


It returns an object: 

```javascript
location = {
  name: 'location name',
  lat: '12.3456',
  lng: '98.7654'
}
```

And fires an event:

*   **placePicker:place_changed** with the location object as payload. 

## Problems

If you try to use this together with the aurelia-google-maps plugin, you'll get an error:

```
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
```

If this is the case, you need to set the getAPI property to false and have to set a name for the apiLoadedEvent.
At the time of writing, the aurelia-google-maps plugin will not fire an event, so this will not work. 
I suggest you go to [My Fork](https://github.com/Tseberechts/aurelia-google-maps) and overwrite the dist folder in you node_modules. 
Let's hope my pull request will get merged soon.

---
_Source: https://npm.io/package/aurelia-place-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._