paper-input-location.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../google-apis/google-maps-api.html">

<!--
### paper-input-location
Material design: [Text fields](https://www.google.com/design/spec/components/text-fields.html) with location autocomplete

`<paper-input-location>` is a single-line text field with Material Design styling and location autocomplete.

    <paper-input-location label="Place"></paper-input-location>

### Google Maps API

This element work with the Google Maps API. You need a valid API Key. You can get one here: https://developers.google.com/maps/documentation/javascript/get-api-key.

@demo demo/index.html
-->


<dom-module id="paper-input-location">
    <template>
    <style>
         :host {
            display: block;
        }
    </style>

    <google-maps-api id="maps" api-key="[[mapsApiKey]]" libraries="places" on-api-load="_onApiLoad"></google-maps-api>
    <paper-input
            id="inputPaper"
            on-value-changed="_resetLocation"
            invalid="{{invalid}}"
            disabled$="[[disabled]]"
            autofocus="[[autofocus]]"
            label="[[label]]"
            value="{{query}}"
            required$="[[required]]"
            error-message="[[errorMessage]]">
    </paper-input>
  </template>
</dom-module>
<script>
    Polymer({

        is: 'paper-input-location',

        /**
         * Fired when the user clicks on a place in the Google Map place list.
         *
         * @event place-clicked
         */

        properties: {
            /**
             * Actual value of the paper-input
             */
            query: {
                type: String,
                notify: true
            },
            /**
             * Option for the Autocomplete Google Maps API
             */
            autocompleteOptions: {
                type: Object,
                value: function() {
                    return {};
                }
            },
            /**
             * Place object is set after the user click on one Google Maps autocomplete result.
             */
            place: {
                type: Object,
                value: function() {
                    return {};
                },
                notify: true
            },
            /**
             * Computed object with latitude and longitude
             */
            locationGeoPos: {
                type: Object,
                computed: '_computeLocation(longitude, latitude)'
            },
            /**
             * Location formatted address of the last clicked place.
             */
            locationName: {
                type: String,
                notify: true
            },
            /**
             * Latitude of the last clicked place.
             */
            latitude: {
                type: Number,
                notify: true
            },
            /**
             * Longitude of the last clicked place.
             */
            longitude: {
                type: Number,
                notify: true
            },
            /**
             * Set to true to disable this input.
             */
            disabled: {
                type: Boolean,
                default: false
            },
            /**
             * Set to true to mark the input as required.
             */
            required: {
                type: Boolean,
                default: false
            },
            /**
             * Returns true if the value is invalid
             */
            invalid: {
                type: Boolean,
                value: false,
                notify: true
            },
            /**
             * Google Maps api key. To obtain an API key, see https://developers.google.com/maps/documentation/javascript/get-api-key.
             */
            mapsApiKey: String,
            /**
             * The label for this input.
             */
            label: String,
            /**
             * Autofocus propertie
             */
            autofocus: Boolean,
            /**
             * The error message to display when the input is invalid.
             */
            errorMessage: String,
        },
        /**
         * Validate if the input is filled with a valid Google Map address.
         */
        validatePlace: function() {
            if (this.place.geometry) {
                return true;
            } else {
                this.$.inputPaper.invalid = true;
                return false;
            }
        },
        _computeLocation: function(longitude, latitude) {
            return {
                'lng': longitude,
                'lat': latitude
            }
        },
        _resetLocation: function() {
            this.place = {};
        },
        _onApiLoad: function() {
            var rawInput;

            if (this.$.inputPaper.querySelector('#input')) {
                rawInput = this.$.inputPaper.querySelector('#input');
            } else {
                rawInput = this.$.inputPaper.root.querySelector('#input');
            }

            this.autocomplete = new google.maps.places.Autocomplete(rawInput, this.options);
            google.maps.event.addListener(this.autocomplete, 'place_changed', this._onChangePlace.bind(this));
        },
        _onChangePlace: function() {
            this.$.inputPaper.invalid = false;
            this.place = this.autocomplete.getPlace();
            this.locationName = this.autocomplete.getPlace().formatted_address;
            this.latitude = this.autocomplete.getPlace().geometry.location.lat();
            this.longitude = this.autocomplete.getPlace().geometry.location.lng();
            this.fire('place-clicked');

        }
    });
</script>