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 |