| OLD | NEW | 
|    1 <link rel="import" href="../polymer/polymer.html"> |    1 <link rel="import" href="../polymer/polymer.html"> | 
|    2 <link rel="import" href="../google-apis/google-maps-api.html"> |    2 <link rel="import" href="../google-apis/google-maps-api.html"> | 
|    3  |    3  | 
|    4 <!-- |    4 <!-- | 
|    5 Element for generating a Google Maps Street View Panorama. |    5 Element for generating a Google Maps Street View Panorama. | 
|    6  |    6  | 
|    7 ##### Example |    7 ##### Example | 
|    8  |    8  | 
|    9     <google-streetview-pano |    9     <google-streetview-pano | 
|   10       pano-id="CWskcsTEZBNXaD8gG-zATA" |   10       pano-id="CWskcsTEZBNXaD8gG-zATA" | 
|   11       heading="330" |   11       heading="330" | 
|   12       pitch="-2" |   12       pitch="-2" | 
|   13       zoom="0.8" |   13       zoom="0.8" | 
|   14       disable-default-ui> |   14       disable-default-ui> | 
|   15     </google-streetview-pano> |   15     </google-streetview-pano> | 
|   16  |   16  | 
|   17 There are tons of great panoramas on the [Google Maps | Views page](https://www.
     google.com/maps/views/home?gl=us) |   17 There are tons of great panoramas on the [Google Maps | Views page](https://www.
     google.com/maps/views/home?gl=us) | 
|   18  |   18  | 
|   19 To grab a panorama, look at its url in the address bar. For example: |   19 To grab a panorama, look at its url in the address bar. For example: | 
|   20  |   20  | 
|   21 google.com/maps/views/view/102684927602131521305/photo/**1szTnskrdKIAAAGuu3fZRw*
     * |   21 google.com/maps/views/view/102684927602131521305/photo/**1szTnskrdKIAAAGuu3fZRw*
     * | 
|   22  |   22  | 
|   23 The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, `
     pitch` and `zoom` manually. |   23 The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, `
     pitch` and `zoom` manually. | 
|   24  |   24  | 
 |   25 You can also use the position attribute and set it to a position with a computed
      value. Example: { lat: 42.345573, lng: -71.098326 } | 
 |   26  | 
 |   27     <google-streetview-pano | 
 |   28       position="[[_myComputedPosition()]]" | 
 |   29       heading="330" | 
 |   30       pitch="-2" | 
 |   31       zoom="0.8" | 
 |   32       disable-default-ui> | 
 |   33     </google-streetview-pano> | 
 |   34  | 
|   25 @demo |   35 @demo | 
|   26 --> |   36 --> | 
|   27  |   37  | 
|   28 <dom-module id="google-streetview-pano"> |   38 <dom-module id="google-streetview-pano"> | 
|   29   <style> |   39   <style> | 
|   30     :host { |   40     :host { | 
|   31       display: block; |   41       display: block; | 
|   32     } |   42     } | 
|   33     #pano { |   43     #pano { | 
|   34       height: 100%; |   44       height: 100%; | 
|   35     } |   45     } | 
|   36   </style> |   46   </style> | 
|   37   <template> |   47   <template> | 
|   38     <google-maps-api api-key="{{apiKey}}" version="{{version}}" |   48     <google-maps-api api-key="{{apiKey}}" version="{{version}}" | 
|   39                      libraries="{{libraries}}" |  | 
|   40                      client-id="{{clientId}}" |   49                      client-id="{{clientId}}" | 
|   41                      language="{{language}}" |   50                      language="{{language}}" | 
|   42                      client |   51                      client | 
|   43                      on-api-load="_mapApiLoaded"></google-maps-api> |   52                      on-api-load="_mapApiLoaded"></google-maps-api> | 
|   44     <div id="pano" on-mouseenter="_autoStop" |   53     <div id="pano" on-mouseenter="_autoStop" | 
|   45                    on-mouseleave="_autoUpdate"></div> |   54                    on-mouseleave="_autoUpdate"></div> | 
|   46   </template> |   55   </template> | 
|   47 </dom-module> |   56 </dom-module> | 
|   48  |   57  | 
|   49 <script> |   58 <script> | 
|   50   "use strict"; |   59   "use strict"; | 
|   51  |   60  | 
|   52   Polymer({ |   61   Polymer({ | 
 |   62  | 
|   53     is: 'google-streetview-pano', |   63     is: 'google-streetview-pano', | 
|   54       properties: { |   64  | 
 |   65     properties: { | 
|   55       /** |   66       /** | 
|   56        * A Maps API key. To obtain an API key, see developers.google.com/maps/do
     cumentation/javascript/tutorial#api_key. |   67        * A Maps API key. To obtain an API key, see developers.google.com/maps/do
     cumentation/javascript/tutorial#api_key. | 
|   57        */ |   68        */ | 
|   58       apiKey: String, |   69       apiKey: String, | 
|   59  |   70  | 
|   60       /** |   71       /** | 
|   61        * A Maps API for Business Client ID. To obtain a Maps API for Business Cl
     ient ID, see developers.google.com/maps/documentation/business/. |   72        * A Maps API for Business Client ID. To obtain a Maps API for Business Cl
     ient ID, see developers.google.com/maps/documentation/business/. | 
|   62        * If set, a Client ID will take precedence over an API Key. |   73        * If set, a Client ID will take precedence over an API Key. | 
|   63        */ |   74        */ | 
|   64       clientId: String, |   75       clientId: String, | 
|   65  |   76  | 
|   66       /** |   77       /** | 
|   67        * The localized language to load the Maps API with. For more information |   78        * The localized language to load the Maps API with. For more information | 
|   68        * see https://developers.google.com/maps/documentation/javascript/basics#
     Language |   79        * see https://developers.google.com/maps/documentation/javascript/basics#
     Language | 
|   69        * |   80        * | 
|   70        * Note: the Maps API defaults to the preferred language setting of the br
     owser. |   81        * Note: the Maps API defaults to the preferred language setting of the br
     owser. | 
|   71        * Use this parameter to override that behavior. |   82        * Use this parameter to override that behavior. | 
|   72        * |   83        * | 
|   73        */ |   84        */ | 
|   74       language: String, |   85       language: String, | 
|   75  |   86  | 
|   76       /** |   87       /** | 
|   77        * A comma separated list (e.g. "places,geometry") of libraries to load |  | 
|   78        * with this map. Defaults to "places". For more information see |  | 
|   79        * https://developers.google.com/maps/documentation/javascript/libraries. |  | 
|   80        * |  | 
|   81        */ |  | 
|   82       libraries: { |  | 
|   83         type: String, |  | 
|   84         value: "places" |  | 
|   85       }, |  | 
|   86  |  | 
|   87       /** |  | 
|   88        * Version of the Google Maps API to use. |   88        * Version of the Google Maps API to use. | 
|   89        * |   89        * | 
|   90        */ |   90        */ | 
|   91       version: { |   91       version: { | 
|   92         type: String, |   92         type: String, | 
|   93         value: '3.exp' |   93         value: '3.exp' | 
|   94       }, |   94       }, | 
|   95  |   95  | 
|   96       /** |   96       /** | 
|   97        * Specifies which photosphere to load |   97        * Specifies which photosphere to load | 
|   98        * |   98        * | 
|   99        * **Required** |   99        * | 
|  100        */ |  100        */ | 
|  101       panoId: { |  101       panoId: { | 
|  102         type: String, |  102         type: String, | 
|  103         observer: '_panoIdChanged' |  103         observer: '_panoIdChanged' | 
|  104       }, |  104       }, | 
|  105  |  105  | 
|  106       /** |  106       /** | 
 |  107        * Specifies which position to load | 
 |  108        * | 
 |  109        * | 
 |  110        */ | 
 |  111       position: { | 
 |  112         type: Object, | 
 |  113         observer: '_positionChanged' | 
 |  114       }, | 
 |  115  | 
 |  116       /** | 
|  107        * The camera heading in degrees relative to true north. True north is 0°,
      east is 90°, south is 180°, west is 270°. |  117        * The camera heading in degrees relative to true north. True north is 0°,
      east is 90°, south is 180°, west is 270°. | 
|  108        */ |  118        */ | 
|  109       heading: { |  119       heading: { | 
|  110         type: Number, |  120         type: Number, | 
|  111         value: 45 |  121         value: 45 | 
|  112       }, |  122       }, | 
|  113  |  123  | 
|  114       /** |  124       /** | 
|  115        * The camera pitch in degrees, relative to the street view vehicle. Range
     s from 90° (directly upwards) to -90° (directly downwards). |  125        * The camera pitch in degrees, relative to the street view vehicle. Range
     s from 90° (directly upwards) to -90° (directly downwards). | 
|  116        */ |  126        */ | 
| (...skipping 17 matching lines...) Expand all  Loading... | 
|  134         type: Boolean, |  144         type: Boolean, | 
|  135         value: false |  145         value: false | 
|  136       }, |  146       }, | 
|  137  |  147  | 
|  138       /** |  148       /** | 
|  139        * If true, disables the auto panning animation |  149        * If true, disables the auto panning animation | 
|  140        */ |  150        */ | 
|  141       disableAutoPan: { |  151       disableAutoPan: { | 
|  142         type: Boolean, |  152         type: Boolean, | 
|  143         value: false |  153         value: false | 
|  144       }, |  154       } | 
|  145  |  155  | 
|  146     }, |  156     }, | 
|  147  |  157  | 
|  148     pano: null, |  158     pano: null, | 
|  149     rAFid: null, |  159     rAFid: null, | 
 |  160  | 
 |  161     /** | 
 |  162      * Called when the Google Maps API has loaded. | 
 |  163      */ | 
|  150     _mapApiLoaded: function() { |  164     _mapApiLoaded: function() { | 
|  151       this.pano = new google.maps.StreetViewPanorama( |  165       this.pano = new google.maps.StreetViewPanorama(this.$.pano, this._getPanoO
     ptions()); | 
|  152           this.$.pano, |  | 
|  153           this._getPanoOptions()); |  | 
|  154       this.pano.setVisible(true); |  166       this.pano.setVisible(true); | 
|  155  |  167  | 
|  156       if (this.disableAutoPan) { |  168       if (this.disableAutoPan) { | 
|  157         return; |  169         return; | 
|  158       } |  170       } | 
|  159       // Kickoff the rotating animation |  171       // Kickoff the rotating animation | 
|  160       this.rAFid = requestAnimationFrame(this.update.bind(this)); |  172       this.rAFid = requestAnimationFrame(this.update.bind(this)); | 
|  161     }, |  173     }, | 
|  162  |  174  | 
|  163     /** |  175     /** | 
|  164      * Returns the an object with the current panorama configurations. |  176      * Returns the an object with the current panorama configurations. | 
|  165      */ |  177      */ | 
|  166     _getPanoOptions: function() { |  178     _getPanoOptions: function() { | 
|  167       var panoOptions = { |  179       var panoOptions = { | 
|  168         pano: this.panoId, |  180         pano: this.panoId, | 
 |  181         position: this.position, | 
|  169         pov: { |  182         pov: { | 
|  170           heading: this.heading, |  183           heading: this.heading, | 
|  171           pitch: this.pitch |  184           pitch: this.pitch | 
|  172         }, |  185         }, | 
|  173         disableDefaultUI: this.disableDefaultUi, |  186         disableDefaultUI: this.disableDefaultUi, | 
|  174         zoom: this.zoom |  187         zoom: this.zoom | 
|  175       }; |  188       }; | 
|  176  |  189  | 
|  177       return panoOptions; |  190       return panoOptions; | 
|  178     }, |  191     }, | 
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
|  221       } |  234       } | 
|  222  |  235  | 
|  223       this.stop(); |  236       this.stop(); | 
|  224     }, |  237     }, | 
|  225  |  238  | 
|  226     _panoIdChanged: function(newVal, oldVal) { |  239     _panoIdChanged: function(newVal, oldVal) { | 
|  227       if (this.pano) { |  240       if (this.pano) { | 
|  228         this.pano.setPano(newVal); |  241         this.pano.setPano(newVal); | 
|  229         this.reset(); |  242         this.reset(); | 
|  230       } |  243       } | 
 |  244     }, | 
 |  245  | 
 |  246     _positionChanged: function(newVal, oldVal) { | 
 |  247       if (this.pano) { | 
 |  248         this.pano.setPosition(newVal); | 
 |  249         this.reset(); | 
 |  250       } | 
|  231     } |  251     } | 
|  232   }); |  252   }); | 
|  233 </script> |  253 </script> | 
| OLD | NEW |