upgrade to support Polymer 2.0

Author: mlisook

.vscode/settings.json

@@ -0,0 +1,3 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+}

README.md

@@ -2,12 +2,15 @@
 
 Google Places Autocomplete attached to a paper-input, providing a convenient material design input for places.
 
-[Live Demo](https://mlisook.github.io/paper-input-place/)
+This release is a Polymer 2.0 hybrid element so it will work in 1.x or 2.0 Polymer applications.
+
+[Live Demos](https://mlisook.github.io/paper-input-place/)
 
 Basic use:
 
 ```html
-<paper-input-place api-key="your google api key" value="{{tourstop.place}}" hide-error></paper-input-place>
+<paper-input-place api-key="your google api key" value="{{tourstop.place}}" 
+  label="Pick a place" hide-error></paper-input-place>
 ```
 The `value` property is an object:
 
@@ -24,7 +27,7 @@ The `value` property is an object:
 Basic use with validation:
 
 ```html
-<paper-input-place api-key="your google api key" value="{{tourstop.place}}"></paper-input-place>
+<paper-input-place label="Pick a place" api-key="your google api key" value="{{tourstop.place}}"></paper-input-place>
 ```
 ## Installation
 
@@ -184,8 +187,12 @@ The floating label for the paper-input.
 Indicates to the control that selection of a place is mandatory and that an empty input is not valid.
 
 ## Methods - Convenience Functions
+While not needed for the main purpose, the user entering a place, you may have existing data you
+need to geocode for use in the element.  We make these functions available here since the Google
+API is already loaded.
+
 ### geocode(address)
-The `geocode` function takes an address as it's parameter and returns a _promise_ for a result which is a _place object_ as described in the place property above.  Note that this does not have any effect on the control's properties (but, of course one could turn around and set the value property with information from the place detail returned).
+The `geocode` function takes an address as its parameter and returns a _promise_ for a result which is a _place object_ as described in the place property above.  Note that this does not have any effect on the control's properties (but, of course one could turn around and set the value property with information from the place detail returned).
 ```js
 this.$$('paper-input-place').geocode(address).then(
   function(result) {

bower.json

@@ -2,6 +2,7 @@
   "name": "paper-input-place",
   "description": "Google Places Autocomplete attached to paper-input",
   "main": "paper-input-place.html",
+  "demo": "demo/index.html",
   "keywords": [
     "polymer",
     "place",
@@ -14,16 +15,18 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.9.1",
-    "google-apis": "GoogleWebComponents/google-apis#^1.1.6",
-    "paper-input": "PolymerElements/paper-input#^2.0.0"
+    "polymer": "Polymer/polymer#1.9 - 2",
+    "paper-input": "PolymerElements/paper-input#^2.0.0",
+    "iron-jsonp-library": "PolymerElements/iron-jsonp-library#^2.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^2.0.0",
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "web-component-tester": "^4.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "^6.0.0",
     "highlightjs": "^9.5.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   },
-  "version": "1.2.0"
+  "version": "1.9.0"
 }

paper-input-place.html

@@ -1,16 +1,45 @@
 <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" />
+<link rel="import" href="../iron-jsonp-library/iron-jsonp-library.html">
 <link rel="import" href="../iron-icon/iron-icon.html" />
 <link rel="import" href="paper-input-place-icons.html" />
 
 <!--
 `paper-input-place`
-Google Places Autocomplete attached to paper-input
+
+Google Places Autocomplete attached to paper-input.
+
+This release is a Polymer 2.0 hybrid element so it will work in 1.x or 2.0 Polymer applications.
+
+  Basic use:
+
+```html
+<paper-input-place api-key="your google api key" value="{{tourstop.place}}" 
+  label="Pick a place" hide-error></paper-input-place>
+```
+The `value` property is an object:
+
+```js
+{
+  "search": "Guggenheim Museum, 5th Avenue, New York, NY, United States",
+  "place_id": "ChIJmZ5emqJYwokRuDz79o0coAQ",
+  "latLng": {
+    "lat": 40.7829796,
+    "lng": -73.95897059999999
+  }
+}
+```
+Basic use with validation:
+
+```html
+<paper-input-place label="Pick a place" api-key="your google api key" value="{{tourstop.place}}"></paper-input-place>
+```
+
+
 
 @demo demo/index.html
 
-@version 1.1.0
+@version 1.9.0
 -->
 
 <dom-module id="paper-input-place">
@@ -21,7 +50,22 @@
       }
     </style>
     <template is="dom-if" if="[[apiKey]]" restamp="true">
-      <google-maps-api api-key="[[apiKey]]" on-api-load="_mapsApiLoaded"></google-maps-api>
+      <!-- 
+        NOTE: the GoogleWebComponents collection has not been updated
+        to support Polymer 2.0 as of 5/31/2017.  There is no estimated
+        date at this time.
+
+        For that reason this control is using iron-jsonp-library to load
+        the google maps api instead of <google-maps-api>.  The url string 
+        is the same as what would have been issued by the <google-maps-api> so
+        even if that control is used elsewhere in your 1.x app, the api will
+        not be loaded twice.
+        -->
+      <iron-jsonp-library
+        library-url="[[_gmapApiUrl]]"
+        notify-event="map-api-load"
+        library-loaded="{{_ijplLoaded}}" 
+        on-map-api-load="_mapsApiLoaded"></iron-jsonp-library>
     </template>
   <paper-input id="locationsearch" label="[[label]]" value="{{_value}}" invalid="[[invalid]]" disabled$="[[disabled]]" error-message="Invalid - please select a place">
     <iron-icon icon="papinpplc:clear" suffix on-tap="_clearLocation"></iron-icon>
@@ -171,6 +215,22 @@
           notify: true,
           value: "",
           observer: '_svalChanged'
+        },
+        /** 
+         * @private
+         * The url for the google maps api
+         */
+        _gmapApiUrl: {
+          type: String,
+          notify: true,
+          computed: '_computeUrl(apiKey)'
+        },
+        /** 
+         * @private
+         * jsonp loaded bool
+         */
+        _ijplLoaded: {
+          type: Boolean
         }
 
       },
@@ -182,6 +242,11 @@
         }
       },
 
+      _computeUrl: function(akey) {
+        return "https://maps.googleapis.com/maps/api/js?callback=%%callback%%&v=3.exp&libraries=drawing,geometry,places,visualization&key="
+            + akey; 
+      },
+
       _mapsApiLoaded: function() {
         if (!this._geocoder && !this._places && this.$.locationsearch && this.$.locationsearch.$.nativeInput) {
           this._geocoder = new google.maps.Geocoder();