| OLD | NEW |
| 1 <!-- Copyright (c) 2015 Google Inc. All rights reserved. --> | 1 <!-- Copyright (c) 2015 Google Inc. All rights reserved. --> |
| 2 | 2 |
| 3 <link rel="import" href="../polymer/polymer.html"> | 3 <link rel="import" href="../polymer/polymer.html"> |
| 4 | 4 |
| 5 <!-- | 5 <!-- |
| 6 `google-map-search` provides Google Maps Places API functionality. | 6 `google-map-search` provides Google Maps Places API functionality. |
| 7 | 7 |
| 8 See https://developers.google.com/maps/documentation/javascript/places for more | 8 See https://developers.google.com/maps/documentation/javascript/places for more |
| 9 information on the API. | 9 information on the API. |
| 10 | 10 |
| 11 #### Example: | 11 #### Example: |
| 12 | 12 |
| 13 <template is="dom-bind"> | 13 <template is="dom-bind"> |
| 14 <google-map-search map="[[map]]" libraries="places" query="Pizza" | 14 <google-map-search map="[[map]]" query="Pizza" results="{{results}}"> |
| 15 results="{{results}}"></google-map-search> | 15 </google-map-search> |
| 16 <google-map map="{{map}}" latitude="37.779" | 16 <google-map map="{{map}}" latitude="37.779" |
| 17 longitude="-122.3892"> | 17 longitude="-122.3892"> |
| 18 <template is="dom-repeat" items="{{results}}" as="marker"> | 18 <template is="dom-repeat" items="{{results}}" as="marker"> |
| 19 <google-map-marker latitude="{{marker.latitude}}" | 19 <google-map-marker latitude="{{marker.latitude}}" |
| 20 longitude="{{marker.longitude}}"> | 20 longitude="{{marker.longitude}}"> |
| 21 <h2>{{marker.name}}</h2> | 21 <h2>{{marker.name}}</h2> |
| 22 <span>{{marker.formatted_address}}</span> | 22 <span>{{marker.formatted_address}}</span> |
| 23 </google-map-marker> | 23 </google-map-marker> |
| 24 </template> | 24 </template> |
| 25 </google-map> | 25 </google-map> |
| (...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 112 value: function() { return []; }, | 112 value: function() { return []; }, |
| 113 notify: true | 113 notify: true |
| 114 }, | 114 }, |
| 115 | 115 |
| 116 /** | 116 /** |
| 117 * The lat/lng location. | 117 * The lat/lng location. |
| 118 */ | 118 */ |
| 119 location: { | 119 location: { |
| 120 type: Object, | 120 type: Object, |
| 121 value: null, | 121 value: null, |
| 122 readyOnly: true | 122 readOnly: true |
| 123 } | 123 } |
| 124 }, | 124 }, |
| 125 | 125 |
| 126 observers: [ | 126 observers: [ |
| 127 'search(query,map,location,radius,types,globalSearch)', | 127 'search(query,map,location,radius,types,globalSearch)', |
| 128 '_updateLocation(latitude,longitude)' | 128 '_updateLocation(latitude,longitude)' |
| 129 ], | 129 ], |
| 130 | 130 |
| 131 /** | 131 /** |
| 132 * Fired when the details of a place are returned. |
| 133 * |
| 134 * @event google-map-search-place-detail |
| 135 * @param {google.maps.MarkerPlace} detail The place details. |
| 136 */ |
| 137 |
| 138 /** |
| 132 * Fired when the search element returns a result. | 139 * Fired when the search element returns a result. |
| 133 * | 140 * |
| 134 * @event google-map-search-results | 141 * @event google-map-search-results |
| 135 * @param {Array} detail An array of search results | 142 * @param {Array<{latitude: number, longitude: number}>} detail An array of
search results |
| 136 * @param {number} detail.latitude Latitude of the result. | |
| 137 * @param {number} detail.longitude Longitude of the result. | |
| 138 * @param {bool} detail.show Whether to show the result on the map. | |
| 139 */ | 143 */ |
| 140 | 144 |
| 141 /** | 145 /** |
| 142 * Perform a search using for `query` for the search term. | 146 * Perform a search using for `query` for the search term. |
| 143 */ | 147 */ |
| 144 search: function() { | 148 search: function() { |
| 145 if (this.query && this.map) { | 149 if (this.query && this.map) { |
| 146 var places = new google.maps.places.PlacesService(this.map); | 150 var places = new google.maps.places.PlacesService(this.map); |
| 147 | 151 |
| 148 if (this.types && typeof this.types == 'string') { | 152 if (this.types && typeof this.types == 'string') { |
| (...skipping 10 matching lines...) Expand all Loading... |
| 159 places.textSearch({ | 163 places.textSearch({ |
| 160 query: this.query, | 164 query: this.query, |
| 161 types: types, | 165 types: types, |
| 162 bounds: bounds, | 166 bounds: bounds, |
| 163 radius: radius, | 167 radius: radius, |
| 164 location: location | 168 location: location |
| 165 }, this._gotResults.bind(this)); | 169 }, this._gotResults.bind(this)); |
| 166 } | 170 } |
| 167 }, | 171 }, |
| 168 | 172 |
| 173 /** |
| 174 * Fetches details for a given place. |
| 175 * @param {String} placeId The place id. |
| 176 * @return {Promise} place The place information. |
| 177 */ |
| 178 getDetails: function(placeId) { |
| 179 var places = new google.maps.places.PlacesService(this.map); |
| 180 |
| 181 return new Promise(function(resolve, reject) { |
| 182 places.getDetails({placeId: placeId}, function(place, status) { |
| 183 if (status === google.maps.places.PlacesServiceStatus.OK) { |
| 184 resolve(place); |
| 185 this.fire('google-map-search-place-detail', place); |
| 186 } else { |
| 187 reject(status); |
| 188 } |
| 189 }.bind(this)); |
| 190 }.bind(this)); |
| 191 }, |
| 192 |
| 169 _gotResults: function(results, status) { | 193 _gotResults: function(results, status) { |
| 170 this.results = results.map(function(result) { | 194 this.results = results.map(function(result) { |
| 171 // obtain lat/long from geometry | 195 // obtain lat/long from geometry |
| 172 result.latitude = result.geometry.location.lat(); | 196 result.latitude = result.geometry.location.lat(); |
| 173 result.longitude = result.geometry.location.lng(); | 197 result.longitude = result.geometry.location.lng(); |
| 174 return result; | 198 return result; |
| 175 }); | 199 }); |
| 176 this.fire('google-map-search-results', this.results); | 200 this.fire('google-map-search-results', this.results); |
| 177 }, | 201 }, |
| 178 | 202 |
| 179 _updateLocation: function() { | 203 _updateLocation: function() { |
| 180 if (!this.map) { | 204 if (!this.map) { |
| 181 return; | 205 return; |
| 182 } else if (typeof this.latitude !== 'number' || isNaN(this.latitude)) { | 206 } else if (typeof this.latitude !== 'number' || isNaN(this.latitude)) { |
| 183 throw new TypeError('latitude must be a number'); | 207 throw new TypeError('latitude must be a number'); |
| 184 } else if (typeof this.longitude !== 'number' || isNaN(this.longitude)) { | 208 } else if (typeof this.longitude !== 'number' || isNaN(this.longitude)) { |
| 185 throw new TypeError('longitude must be a number'); | 209 throw new TypeError('longitude must be a number'); |
| 186 } | 210 } |
| 187 | 211 |
| 188 // Update location. This will trigger a new search. | 212 // Update location. This will trigger a new search. |
| 189 this._setLocation({lat: this.latitude, lng: this.longitude}); | 213 this._setLocation({lat: this.latitude, lng: this.longitude}); |
| 190 } | 214 } |
| 191 }); | 215 }); |
| 192 </script> | 216 </script> |
| OLD | NEW |