| OLD | NEW |
| (Empty) | |
| 1 <!-- Copyright (c) 2015 Google Inc. All rights reserved. --> |
| 2 |
| 3 <link rel="import" href="../polymer/polymer.html"> |
| 4 |
| 5 |
| 6 <script> |
| 7 /** |
| 8 Provides Google Maps Places API functionality. |
| 9 |
| 10 See https://developers.google.com/maps/documentation/javascript/places for more |
| 11 information on the API. |
| 12 |
| 13 #### Example: |
| 14 |
| 15 <template is="dom-bind"> |
| 16 <google-map-search map="{{map}}" query="Pizza" |
| 17 result="{{result}}"></google-map-search> |
| 18 <google-map map="{{map}}" latitude="37.779" |
| 19 longitude="-122.3892"></google-map> |
| 20 <div>Result: |
| 21 <span>{{result.latitude}}</span>, |
| 22 <span>{{result.longitude}}</span> |
| 23 </div> |
| 24 </template> |
| 25 <script> |
| 26 document.querySelector('google-map-search').search(); |
| 27 < /script> |
| 28 |
| 29 */ |
| 30 Polymer({ |
| 31 |
| 32 is: 'google-map-search', |
| 33 |
| 34 /** |
| 35 Fired when the search element returns a result. |
| 36 |
| 37 @event google-map-search-result |
| 38 @param {Object} detail |
| 39 @param {number} detail.latitude Latitude of the result. |
| 40 @param {number} detail.longitude Longitude of the result. |
| 41 @param {bool} detail.show Whether to show the result on the map. |
| 42 */ |
| 43 properties: { |
| 44 /** |
| 45 * The Google map object. |
| 46 */ |
| 47 map: { |
| 48 type: Object, |
| 49 value: null |
| 50 }, |
| 51 /** |
| 52 * The search query. |
| 53 */ |
| 54 query: { |
| 55 type: String, |
| 56 value: null |
| 57 }, |
| 58 |
| 59 /** |
| 60 * The search result. |
| 61 */ |
| 62 result: { |
| 63 type: Object, |
| 64 value: null, |
| 65 notify: true |
| 66 } |
| 67 }, |
| 68 |
| 69 observers: [ |
| 70 'search(query,map)' |
| 71 ], |
| 72 |
| 73 /** |
| 74 * Performance a search using for `query` for the search term. |
| 75 */ |
| 76 search: function() { |
| 77 if (this.query && this.map) { |
| 78 var places = new google.maps.places.PlacesService(this.map); |
| 79 places.textSearch({query: this.query}, this._gotResults.bind(this)); |
| 80 } |
| 81 }, |
| 82 |
| 83 _gotResults: function(results, status) { |
| 84 this.result = { |
| 85 latitude: results[0].geometry.location.lat(), |
| 86 longitude: results[0].geometry.location.lng(), |
| 87 show: true |
| 88 } |
| 89 this.fire('google-map-search-result', this.result); |
| 90 } |
| 91 }); |
| 92 </script> |
| OLD | NEW |