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

Side by Side Diff: lib/src/google-streetview-pano/google-streetview-pano.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-signin/google-signin-aware.html ('k') | lib/src/hydrolysis/.travis.yml » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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>
OLDNEW
« no previous file with comments | « lib/src/google-signin/google-signin-aware.html ('k') | lib/src/hydrolysis/.travis.yml » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698