Fix search element and update demo

google-map-search.html

@@ -2,48 +2,36 @@
 
 <link rel="import" href="../polymer/polymer.html">
 
-
-<script>
-/**
-Provides Google Maps Places API functionality.
+<!--
+`google-map-search` provides Google Maps Places API functionality.
 
 See https://developers.google.com/maps/documentation/javascript/places for more
 information on the API.
 
 #### Example:
 
     <template is="dom-bind">
-      <google-map-search map="{{map}}" query="Pizza" global-search
+      <google-map-search map="[[map]]" query="Pizza"
                          results="{{results}}"></google-map-search>
       <google-map map="{{map}}" latitude="37.779"
                   longitude="-122.3892">
-        <template repeat="{{results}}">
-          <google-map-marker latitude="{{latitude}}"
-                             longitude="{{longitude}}">
-            <h2>{{name}}</h2>
-            {{formatted_address}}
+        <template is="dom-repeat" items="{{results}}" as="marker">
+          <google-map-marker latitude="{{marker.latitude}}"
+                             longitude="{{marker.longitude}}">
+            <h2>{{marker.name}}</h2>
+            <span>{{marker.formatted_address}}</span>
           </google-map-marker>
         </template>
       </google-map>
     </template>
-    <script>
-      document.querySelector('google-map-search').search();
-    </script>
+ -->
+
+<script>
 
-*/
   Polymer({
 
     is: 'google-map-search',
 
-/**
-Fired when the search element returns a result.
-
-@event google-map-search-results
-@param {Array} detail An array of search results
-  @param {number} detail.latitude Latitude of the result.
-  @param {number} detail.longitude Longitude of the result.
-  @param {bool} detail.show Whether to show the result on the map.
-*/
     properties: {
 
       /**
@@ -123,6 +111,15 @@ <h2>{{name}}</h2>
         type: Array,
         value: function() { return []; },
         notify: true
+      },
+
+      /**
+       * The lat/lng location.
+       */
+      location: {
+        type: Object,
+        value: function() { return {}; },
+        readyOnly: true
       }
     },
 
@@ -131,6 +128,16 @@ <h2>{{name}}</h2>
       '_updateLocation(latitude,longitude)'
     ],
 
+    /**
+     * Fired when the search element returns a result.
+     *
+     * @event google-map-search-results
+     *   @param {Array} detail An array of search results
+     *   @param {number} detail.latitude Latitude of the result.
+     *   @param {number} detail.longitude Longitude of the result.
+     *   @param {bool} detail.show Whether to show the result on the map.
+     */
+
     /**
      * Perform a search using for `query` for the search term.
      */
@@ -164,7 +171,6 @@ <h2>{{name}}</h2>
         // obtain lat/long from geometry
         result.latitude  = result.geometry.location.lat();
         result.longitude = result.geometry.location.lng();
-
         return result;
       });
       this.fire('google-map-search-results', this.results);
@@ -180,7 +186,7 @@ <h2>{{name}}</h2>
       }
 
       // Update location. This will trigger a new search.
-      this.location = new google.maps.LatLng(this.latitude, this.longitude);
+      this._setLocation(new google.maps.LatLng(this.latitude, this.longitude));
     }
   });
 </script>