Index: lib/src/google-streetview-pano/google-streetview-pano.html |
diff --git a/lib/src/google-streetview-pano/google-streetview-pano.html b/lib/src/google-streetview-pano/google-streetview-pano.html |
index 5aa0a1afaea616bab5057e9168540524fabd18aa..a9c530f018dc8b36bea09f70b079b68614c7f983 100644 |
--- a/lib/src/google-streetview-pano/google-streetview-pano.html |
+++ b/lib/src/google-streetview-pano/google-streetview-pano.html |
@@ -22,6 +22,16 @@ google.com/maps/views/view/102684927602131521305/photo/**1szTnskrdKIAAAGuu3fZRw* |
The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, `pitch` and `zoom` manually. |
+You can also use the position attribute and set it to a position with a computed value. Example: { lat: 42.345573, lng: -71.098326 } |
+ |
+ <google-streetview-pano |
+ position="[[_myComputedPosition()]]" |
+ heading="330" |
+ pitch="-2" |
+ zoom="0.8" |
+ disable-default-ui> |
+ </google-streetview-pano> |
+ |
@demo |
--> |
@@ -36,7 +46,6 @@ The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, ` |
</style> |
<template> |
<google-maps-api api-key="{{apiKey}}" version="{{version}}" |
- libraries="{{libraries}}" |
client-id="{{clientId}}" |
language="{{language}}" |
client |
@@ -50,8 +59,10 @@ The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, ` |
"use strict"; |
Polymer({ |
+ |
is: 'google-streetview-pano', |
- properties: { |
+ |
+ properties: { |
/** |
* A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key. |
*/ |
@@ -74,17 +85,6 @@ The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, ` |
language: String, |
/** |
- * A comma separated list (e.g. "places,geometry") of libraries to load |
- * with this map. Defaults to "places". For more information see |
- * https://developers.google.com/maps/documentation/javascript/libraries. |
- * |
- */ |
- libraries: { |
- type: String, |
- value: "places" |
- }, |
- |
- /** |
* Version of the Google Maps API to use. |
* |
*/ |
@@ -96,7 +96,7 @@ The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, ` |
/** |
* Specifies which photosphere to load |
* |
- * **Required** |
+ * |
*/ |
panoId: { |
type: String, |
@@ -104,6 +104,16 @@ The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, ` |
}, |
/** |
+ * Specifies which position to load |
+ * |
+ * |
+ */ |
+ position: { |
+ type: Object, |
+ observer: '_positionChanged' |
+ }, |
+ |
+ /** |
* The camera heading in degrees relative to true north. True north is 0°, east is 90°, south is 180°, west is 270°. |
*/ |
heading: { |
@@ -141,16 +151,18 @@ The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, ` |
disableAutoPan: { |
type: Boolean, |
value: false |
- }, |
+ } |
}, |
pano: null, |
rAFid: null, |
+ |
+ /** |
+ * Called when the Google Maps API has loaded. |
+ */ |
_mapApiLoaded: function() { |
- this.pano = new google.maps.StreetViewPanorama( |
- this.$.pano, |
- this._getPanoOptions()); |
+ this.pano = new google.maps.StreetViewPanorama(this.$.pano, this._getPanoOptions()); |
this.pano.setVisible(true); |
if (this.disableAutoPan) { |
@@ -166,6 +178,7 @@ The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, ` |
_getPanoOptions: function() { |
var panoOptions = { |
pano: this.panoId, |
+ position: this.position, |
pov: { |
heading: this.heading, |
pitch: this.pitch |
@@ -228,6 +241,13 @@ The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, ` |
this.pano.setPano(newVal); |
this.reset(); |
} |
+ }, |
+ |
+ _positionChanged: function(newVal, oldVal) { |
+ if (this.pano) { |
+ this.pano.setPosition(newVal); |
+ this.reset(); |
+ } |
} |
}); |
</script> |