Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(472)

Side by Side Diff: lib/src/google-map/google-map-search.html

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « lib/src/google-map/google-map-poly.html ('k') | lib/src/google-signin/google-signin.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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>
OLDNEW
« no previous file with comments | « lib/src/google-map/google-map-poly.html ('k') | lib/src/google-signin/google-signin.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698