From 35a15812a942bc367bcce0090dd7d54d91a83d55 Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Sat, 26 Sep 2015 16:11:37 +0200 Subject: [PATCH 1/9] 2D or 3D Rendering according to pano.mode setting instead of only for chrome --- panomarker/src/panomarker.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/panomarker/src/panomarker.js b/panomarker/src/panomarker.js index 12095c5..9bf7553 100644 --- a/panomarker/src/panomarker.js +++ b/panomarker/src/panomarker.js @@ -86,13 +86,16 @@ var PanoMarker = function(opts) { opts = opts || {}; /** - * Currently only Chrome is rendering panoramas in a 3D sphere. The other - * browsers are just showing the raw panorama tiles and pan them around. + * Rendering panoramas in a 3D sphere is configured using the (undocumented) StreetViewPanorama.mode setting. + * (see: https://groups.google.com/forum/#!msg/google-maps-js-api-v3/FNP2INYAUpw/LurOZk0bX_EJ) + * Possible values are: "html4", "html5", and "webgl". Using "webgl" will cause Rendering in a 3D sphere. + * Currently only Chrome is rendering panoramas in a 3D sphere by default. For other browsers this has to be + * configured explicitly. By default other browsers are just showing the raw panorama tiles and pan them around. * * @private * @type {function(StreetViewPov, StreetViewPov, number, Element): Object} */ - this.povToPixel_ = !!window.chrome ? PanoMarker.povToPixel3d : + this.povToPixel_ = opts.pano !== null && opts.pano.mode === "webgl" ? PanoMarker.povToPixel3d : PanoMarker.povToPixel2d; /** @private @type {google.maps.Point} */ From c1e8b5a1f24d3af5587c6fff662169f2499b2181 Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Wed, 30 Sep 2015 23:25:46 +0200 Subject: [PATCH 2/9] PanoramaStreetView.mode=html5 also uses 3D Sphere rendering --- panomarker/src/panomarker.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/panomarker/src/panomarker.js b/panomarker/src/panomarker.js index 9bf7553..8792591 100644 --- a/panomarker/src/panomarker.js +++ b/panomarker/src/panomarker.js @@ -88,15 +88,16 @@ var PanoMarker = function(opts) { /** * Rendering panoramas in a 3D sphere is configured using the (undocumented) StreetViewPanorama.mode setting. * (see: https://groups.google.com/forum/#!msg/google-maps-js-api-v3/FNP2INYAUpw/LurOZk0bX_EJ) - * Possible values are: "html4", "html5", and "webgl". Using "webgl" will cause Rendering in a 3D sphere. + * Possible values are: "html4", "html5", and "webgl". Using "webgl" or "html5" will cause Rendering in a 3D sphere. * Currently only Chrome is rendering panoramas in a 3D sphere by default. For other browsers this has to be * configured explicitly. By default other browsers are just showing the raw panorama tiles and pan them around. * * @private * @type {function(StreetViewPov, StreetViewPov, number, Element): Object} */ - this.povToPixel_ = opts.pano !== null && opts.pano.mode === "webgl" ? PanoMarker.povToPixel3d : - PanoMarker.povToPixel2d; + this.povToPixel_ = opts.pano !== null && (opts.pano.mode === "webgl" || opts.pano.mode === "html5") ? + PanoMarker.povToPixel3d : + PanoMarker.povToPixel2d; /** @private @type {google.maps.Point} */ this.anchor_ = opts.anchor || new google.maps.Point(16, 16); From c211515a65b58a85d46ad29fe18e28b2586cda76 Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Tue, 10 Nov 2015 13:35:28 +0100 Subject: [PATCH 3/9] Fix for case when mode not explicitely set, and pano not initially set, also minified version --- panomarker/src/panomarker.js | 30 +++++++++++++++--------------- panomarker/src/panomarker.min.js | 2 +- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/panomarker/src/panomarker.js b/panomarker/src/panomarker.js index 8792591..c3fdc9b 100644 --- a/panomarker/src/panomarker.js +++ b/panomarker/src/panomarker.js @@ -56,7 +56,7 @@ if (typeof module === 'object' && typeof module.exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && typeof define.amd === 'object') { - define(['goog!maps,3,other_params:[sensor=false&libraries=visualization]'], + define(['goog!maps,3,other_params:[key=AIzaSyBEkMdsK8yWsTAt4NKUxRzXm_57spy6Tqw&sensor=false&libraries=visualization]'], factory); } else { if (typeof google !== 'object' || typeof google.maps !== 'object') { @@ -85,20 +85,6 @@ var PanoMarker = function(opts) { // following won't throw errors. opts = opts || {}; - /** - * Rendering panoramas in a 3D sphere is configured using the (undocumented) StreetViewPanorama.mode setting. - * (see: https://groups.google.com/forum/#!msg/google-maps-js-api-v3/FNP2INYAUpw/LurOZk0bX_EJ) - * Possible values are: "html4", "html5", and "webgl". Using "webgl" or "html5" will cause Rendering in a 3D sphere. - * Currently only Chrome is rendering panoramas in a 3D sphere by default. For other browsers this has to be - * configured explicitly. By default other browsers are just showing the raw panorama tiles and pan them around. - * - * @private - * @type {function(StreetViewPov, StreetViewPov, number, Element): Object} - */ - this.povToPixel_ = opts.pano !== null && (opts.pano.mode === "webgl" || opts.pano.mode === "html5") ? - PanoMarker.povToPixel3d : - PanoMarker.povToPixel2d; - /** @private @type {google.maps.Point} */ this.anchor_ = opts.anchor || new google.maps.Point(16, 16); @@ -572,6 +558,20 @@ PanoMarker.prototype.setPano = function(pano) { throw 'PanoMarker only works inside a StreetViewPanorama.'; } + /** + * Rendering panoramas in a 3D sphere can be configured using the (undocumented) StreetViewPanorama.mode setting. + * (see: https://groups.google.com/forum/#!msg/google-maps-js-api-v3/FNP2INYAUpw/LurOZk0bX_EJ) + * Possible values are: "html4", "html5", and "webgl". Using "webgl" will cause Rendering in a 3D sphere. + * Currently only Chrome is rendering panoramas in a 3D sphere by default. For other browsers this has to be + * configured explicitly. By default other browsers are just showing the raw panorama tiles and pan them around. + * + * @private + * @type {function(StreetViewPov, StreetViewPov, number, Element): Object} + */ + this.povToPixel_ = (!!pano && (pano.mode === "webgl" || pano.mode === "html5" || !pano.mode && !!window.chrome)) || (!pano && !!window.chrome) ? + PanoMarker.povToPixel3d : + PanoMarker.povToPixel2d; + // Remove the marker if it previously was on a panorama if (!!this.pano_) { this.onRemove(); diff --git a/panomarker/src/panomarker.min.js b/panomarker/src/panomarker.min.js index 0ea3971..3af1bb8 100644 --- a/panomarker/src/panomarker.min.js +++ b/panomarker/src/panomarker.min.js @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -!function(t,e){if("object"==typeof module&&"object"==typeof module.exports)module.exports=e();else if("function"==typeof define&&"object"==typeof define.amd)define(["goog!maps,3,other_params:[sensor=false&libraries=visualization]"],e);else{if("object"!=typeof google||"object"!=typeof google.maps)throw new Error("PanoMarker requires google maps library");t.PanoMarker=e()}}("undefined"!=typeof window?window:this,function(){var t=function(e){e=e||{},this.povToPixel_=window.chrome?t.povToPixel3d:t.povToPixel2d,this.anchor_=e.anchor||new google.maps.Point(16,16),this.className_=e.className||null,this.clickable_=e.clickable||!0,this.icon_=e.icon||null,this.id_=e.id||null,this.marker_=null,this.pano_=null,this.pollId_=-1,this.position_=e.position||{heading:0,pitch:0},this.povListener_=null,this.zoomListener_=null,this.size_=e.size||new google.maps.Size(32,32),this.title_=e.title||"",this.visible_=e.visible||!0,this.zIndex_=e.zIndex||1,this.setPano(e.pano||null)};return t.prototype=new google.maps.OverlayView,t.get3dFov=function(t){return 2>=t?126.5-36.75*t:195.93/Math.pow(1.92,t)},t.povToPixel3d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=Math.PI/180,l=t.get3dFov(o)*h,p=i.heading*h,c=i.pitch*h,d=e.heading*h,_=e.pitch*h,u=n/2/Math.tan(l/2),m=Math.cos(_),f=Math.sin(_),g=Math.cos(d),y=Math.sin(d),v=u*m*y,w=u*m*g,k=u*f,b=Math.cos(c),P=Math.sin(c),x=Math.cos(p),z=Math.sin(p),M=u*b*z,I=u*b*x,L=u*P,N=M*v+I*w+L*k,C=M*M+I*I+L*L;if(Math.abs(N)<1e-6)return null;var T=C/N;if(0>T)return null;var S=T*v,E=T*w,j=T*k,V=-P*z,A=-P*x,H=b,Z=x,q=-z,F=0,R=Math.sqrt(Z*Z+q*q+F*F);Z/=R,q/=R,F/=R;var W=S*Z+E*q+j*F,B=S*V+E*A+j*H;return a.left+=W,a.top-=B,a},t.wrapHeading=function(t){return t=(t+180)%360,0>t&&(t+=360),t-180},t.povToPixel2d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=180/Math.pow(2,o),l=h*(r/n),p=t.wrapHeading(e.heading-i.heading),c=e.pitch-i.pitch;return a.left+=p/h*n,a.top-=c/l*r,a},t.prototype.onAdd=function(){if(!this.marker_){var t=document.createElement("div");t.style.position="absolute",t.style.cursor="pointer",t.style.width=this.size_.width+"px",t.style.height=this.size_.height+"px",t.style.display=this.visible_?"block":"none",t.style.zIndex=this.zIndex_,this.id_&&(t.id=this.id_),this.className_&&(t.className=this.className_),this.title_&&(t.title=this.title_),this.icon_&&(t.style.backgroundImage="url("+this.icon_+")"),this.id_||this.className_||this.icon_||(t.style.backgroundImage="url(https://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png)"),this.marker_=t,this.getPanes().overlayMouseTarget.appendChild(t),window.addEventListener("resize",this.draw.bind(this)),this.povListener_=google.maps.event.addListener(this.getMap(),"pov_changed",this.draw.bind(this)),this.zoomListener_=google.maps.event.addListener(this.getMap(),"zoom_changed",this.draw.bind(this));var e="click";window.PointerEvent?e="pointerdown":window.MSPointerEvent&&(e="MSPointerDown"),t.addEventListener(e,this.onClick.bind(this),!1),this.draw()}},t.prototype.draw=function(){if(this.pano_){var t=this.povToPixel_(this.position_,this.pano_.getPov(),null!==this.pano_.getZoom()?this.pano_.getZoom():1,this.pano_.getContainer());null!==t?(this.marker_.style.left=t.left-this.anchor_.x+"px",this.marker_.style.top=t.top-this.anchor_.y+"px"):(this.marker_.style.left=-(9999+this.size_.width)+"px",this.marker_.style.top="0")}},t.prototype.onClick=function(t){this.clickable_&&google.maps.event.trigger(this,"click"),t.cancelBubble=!0,t.stopPropagation&&t.stopPropagation()},t.prototype.onRemove=function(){this.marker_&&(google.maps.event.removeListener(this.povListener_),google.maps.event.removeListener(this.zoomListener_),this.marker_.parentNode.removeChild(this.marker_),this.marker_=null)},t.prototype.getAnchor=function(){return this.anchor_},t.prototype.getClassName=function(){return this.className_},t.prototype.getClickable=function(){return this.clickable_},t.prototype.getIcon=function(){return this.icon_},t.prototype.getId=function(){return this.id_},t.prototype.getPano=function(){return this.pano_},t.prototype.getPosition=function(){return this.position_},t.prototype.getSize=function(){return this.size_},t.prototype.getTitle=function(){return this.title_},t.prototype.getVisible=function(){return this.visible_},t.prototype.getZIndex=function(){return this.zIndex_},t.prototype.setAnchor=function(t){this.anchor_=t,this.draw()},t.prototype.setClassName=function(t){this.className_=t,this.marker_&&(this.marker_.className=t)},t.prototype.setClickable=function(t){this.clickable_=t},t.prototype.setIcon=function(t){this.icon_=t,this.marker_&&(this.marker_.style.backgroundImage=t?"url("+t+")":"")},t.prototype.setId=function(t){this.id_=t,this.marker_&&(this.marker_.id=t)},t.prototype.setPano=function(t){if(t&&!(t instanceof google.maps.StreetViewPanorama))throw"PanoMarker only works inside a StreetViewPanorama.";if(this.pano_&&this.onRemove(),this.setMap(t),this.pano_=t,t){var e=function(t){var e=function(){this.getPanes()&&(window.clearInterval(this.pollId_),this.onAdd(),t&&t(this))};this.pollId_=window.setInterval(e.bind(this),10)};if("undefined"!=typeof Promise)return new Promise(e.bind(this));e.call(this)}},t.prototype.setPosition=function(t){this.position_=t,this.draw()},t.prototype.setSize=function(t){this.size_=t,this.marker_&&(this.marker_.style.width=t.width+"px",this.marker_.style.height=t.height+"px",this.draw())},t.prototype.setTitle=function(t){this.title_=t,this.marker_&&(this.marker_.title=t)},t.prototype.setVisible=function(t){this.visible_=t,this.marker_&&(this.marker_.style.display=t?"block":"none")},t.prototype.setZIndex=function(t){this.zIndex_=t,this.marker_&&(this.marker_.style.zIndex=t)},t}); \ No newline at end of file +!function(t,e){if("object"==typeof module&&"object"==typeof module.exports)module.exports=e();else if("function"==typeof define&&"object"==typeof define.amd)define(["goog!maps,3,other_params:[key=AIzaSyBEkMdsK8yWsTAt4NKUxRzXm_57spy6Tqw&sensor=false&libraries=visualization]"],e);else{if("object"!=typeof google||"object"!=typeof google.maps)throw new Error("PanoMarker requires google maps library");t.PanoMarker=e()}}("undefined"!=typeof window?window:this,function(){var t=function(t){t=t||{},this.anchor_=t.anchor||new google.maps.Point(16,16),this.className_=t.className||null,this.clickable_=t.clickable||!0,this.icon_=t.icon||null,this.id_=t.id||null,this.marker_=null,this.pano_=null,this.pollId_=-1,this.position_=t.position||{heading:0,pitch:0},this.povListener_=null,this.zoomListener_=null,this.size_=t.size||new google.maps.Size(32,32),this.title_=t.title||"",this.visible_=t.visible||!0,this.zIndex_=t.zIndex||1,this.setPano(t.pano||null)};return t.prototype=new google.maps.OverlayView,t.get3dFov=function(t){return 2>=t?126.5-36.75*t:195.93/Math.pow(1.92,t)},t.povToPixel3d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=Math.PI/180,l=t.get3dFov(o)*h,p=i.heading*h,c=i.pitch*h,d=e.heading*h,_=e.pitch*h,u=n/2/Math.tan(l/2),m=Math.cos(_),f=Math.sin(_),g=Math.cos(d),y=Math.sin(d),w=u*m*y,v=u*m*g,k=u*f,b=Math.cos(c),P=Math.sin(c),x=Math.cos(p),z=Math.sin(p),M=u*b*z,I=u*b*x,N=u*P,L=M*w+I*v+N*k,T=M*M+I*I+N*N;if(Math.abs(L)<1e-6)return null;var C=T/L;if(0>C)return null;var S=C*w,E=C*v,A=C*k,j=-P*z,V=-P*x,H=b,Z=x,q=-z,R=0,W=Math.sqrt(Z*Z+q*q+R*R);Z/=W,q/=W,R/=W;var B=S*Z+E*q+A*R,F=S*j+E*V+A*H;return a.left+=B,a.top-=F,a},t.wrapHeading=function(t){return t=(t+180)%360,0>t&&(t+=360),t-180},t.povToPixel2d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=180/Math.pow(2,o),l=h*(r/n),p=t.wrapHeading(e.heading-i.heading),c=e.pitch-i.pitch;return a.left+=p/h*n,a.top-=c/l*r,a},t.prototype.onAdd=function(){if(!this.marker_){var t=document.createElement("div");t.style.position="absolute",t.style.cursor="pointer",t.style.width=this.size_.width+"px",t.style.height=this.size_.height+"px",t.style.display=this.visible_?"block":"none",t.style.zIndex=this.zIndex_,this.id_&&(t.id=this.id_),this.className_&&(t.className=this.className_),this.title_&&(t.title=this.title_),this.icon_&&(t.style.backgroundImage="url("+this.icon_+")"),this.id_||this.className_||this.icon_||(t.style.backgroundImage="url(https://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png)"),this.marker_=t,this.getPanes().overlayMouseTarget.appendChild(t),window.addEventListener("resize",this.draw.bind(this)),this.povListener_=google.maps.event.addListener(this.getMap(),"pov_changed",this.draw.bind(this)),this.zoomListener_=google.maps.event.addListener(this.getMap(),"zoom_changed",this.draw.bind(this));var e="click";window.PointerEvent?e="pointerdown":window.MSPointerEvent&&(e="MSPointerDown"),t.addEventListener(e,this.onClick.bind(this),!1),this.draw()}},t.prototype.draw=function(){if(this.pano_){var t=this.povToPixel_(this.position_,this.pano_.getPov(),null!==this.pano_.getZoom()?this.pano_.getZoom():1,this.pano_.getContainer());null!==t?(this.marker_.style.left=t.left-this.anchor_.x+"px",this.marker_.style.top=t.top-this.anchor_.y+"px"):(this.marker_.style.left=-(9999+this.size_.width)+"px",this.marker_.style.top="0")}},t.prototype.onClick=function(t){this.clickable_&&google.maps.event.trigger(this,"click"),t.cancelBubble=!0,t.stopPropagation&&t.stopPropagation()},t.prototype.onRemove=function(){this.marker_&&(google.maps.event.removeListener(this.povListener_),google.maps.event.removeListener(this.zoomListener_),this.marker_.parentNode.removeChild(this.marker_),this.marker_=null)},t.prototype.getAnchor=function(){return this.anchor_},t.prototype.getClassName=function(){return this.className_},t.prototype.getClickable=function(){return this.clickable_},t.prototype.getIcon=function(){return this.icon_},t.prototype.getId=function(){return this.id_},t.prototype.getPano=function(){return this.pano_},t.prototype.getPosition=function(){return this.position_},t.prototype.getSize=function(){return this.size_},t.prototype.getTitle=function(){return this.title_},t.prototype.getVisible=function(){return this.visible_},t.prototype.getZIndex=function(){return this.zIndex_},t.prototype.setAnchor=function(t){this.anchor_=t,this.draw()},t.prototype.setClassName=function(t){this.className_=t,this.marker_&&(this.marker_.className=t)},t.prototype.setClickable=function(t){this.clickable_=t},t.prototype.setIcon=function(t){this.icon_=t,this.marker_&&(this.marker_.style.backgroundImage=t?"url("+t+")":"")},t.prototype.setId=function(t){this.id_=t,this.marker_&&(this.marker_.id=t)},t.prototype.setPano=function(e){if(e&&!(e instanceof google.maps.StreetViewPanorama))throw"PanoMarker only works inside a StreetViewPanorama.";if(this.povToPixel_=e&&("webgl"===e.mode||"html5"===e.mode||!e.mode&&window.chrome)||!e&&window.chrome?t.povToPixel3d:t.povToPixel2d,this.pano_&&this.onRemove(),this.setMap(e),this.pano_=e,e){var i=function(t){var e=function(){this.getPanes()&&(window.clearInterval(this.pollId_),this.onAdd(),t&&t(this))};this.pollId_=window.setInterval(e.bind(this),10)};if("undefined"!=typeof Promise)return new Promise(i.bind(this));i.call(this)}},t.prototype.setPosition=function(t){this.position_=t,this.draw()},t.prototype.setSize=function(t){this.size_=t,this.marker_&&(this.marker_.style.width=t.width+"px",this.marker_.style.height=t.height+"px",this.draw())},t.prototype.setTitle=function(t){this.title_=t,this.marker_&&(this.marker_.title=t)},t.prototype.setVisible=function(t){this.visible_=t,this.marker_&&(this.marker_.style.display=t?"block":"none")},t.prototype.setZIndex=function(t){this.zIndex_=t,this.marker_&&(this.marker_.style.zIndex=t)},t}); From 6aaf915a654c3a469b586f21ecae1179f648c50a Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Tue, 10 Nov 2015 13:38:18 +0100 Subject: [PATCH 4/9] some cleanup --- panomarker/src/panomarker.js | 2 +- panomarker/src/panomarker.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/panomarker/src/panomarker.js b/panomarker/src/panomarker.js index c3fdc9b..785b755 100644 --- a/panomarker/src/panomarker.js +++ b/panomarker/src/panomarker.js @@ -56,7 +56,7 @@ if (typeof module === 'object' && typeof module.exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && typeof define.amd === 'object') { - define(['goog!maps,3,other_params:[key=AIzaSyBEkMdsK8yWsTAt4NKUxRzXm_57spy6Tqw&sensor=false&libraries=visualization]'], + define(['goog!maps,3,other_params:[sensor=false&libraries=visualization]'], factory); } else { if (typeof google !== 'object' || typeof google.maps !== 'object') { diff --git a/panomarker/src/panomarker.min.js b/panomarker/src/panomarker.min.js index 3af1bb8..8cf24ab 100644 --- a/panomarker/src/panomarker.min.js +++ b/panomarker/src/panomarker.min.js @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -!function(t,e){if("object"==typeof module&&"object"==typeof module.exports)module.exports=e();else if("function"==typeof define&&"object"==typeof define.amd)define(["goog!maps,3,other_params:[key=AIzaSyBEkMdsK8yWsTAt4NKUxRzXm_57spy6Tqw&sensor=false&libraries=visualization]"],e);else{if("object"!=typeof google||"object"!=typeof google.maps)throw new Error("PanoMarker requires google maps library");t.PanoMarker=e()}}("undefined"!=typeof window?window:this,function(){var t=function(t){t=t||{},this.anchor_=t.anchor||new google.maps.Point(16,16),this.className_=t.className||null,this.clickable_=t.clickable||!0,this.icon_=t.icon||null,this.id_=t.id||null,this.marker_=null,this.pano_=null,this.pollId_=-1,this.position_=t.position||{heading:0,pitch:0},this.povListener_=null,this.zoomListener_=null,this.size_=t.size||new google.maps.Size(32,32),this.title_=t.title||"",this.visible_=t.visible||!0,this.zIndex_=t.zIndex||1,this.setPano(t.pano||null)};return t.prototype=new google.maps.OverlayView,t.get3dFov=function(t){return 2>=t?126.5-36.75*t:195.93/Math.pow(1.92,t)},t.povToPixel3d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=Math.PI/180,l=t.get3dFov(o)*h,p=i.heading*h,c=i.pitch*h,d=e.heading*h,_=e.pitch*h,u=n/2/Math.tan(l/2),m=Math.cos(_),f=Math.sin(_),g=Math.cos(d),y=Math.sin(d),w=u*m*y,v=u*m*g,k=u*f,b=Math.cos(c),P=Math.sin(c),x=Math.cos(p),z=Math.sin(p),M=u*b*z,I=u*b*x,N=u*P,L=M*w+I*v+N*k,T=M*M+I*I+N*N;if(Math.abs(L)<1e-6)return null;var C=T/L;if(0>C)return null;var S=C*w,E=C*v,A=C*k,j=-P*z,V=-P*x,H=b,Z=x,q=-z,R=0,W=Math.sqrt(Z*Z+q*q+R*R);Z/=W,q/=W,R/=W;var B=S*Z+E*q+A*R,F=S*j+E*V+A*H;return a.left+=B,a.top-=F,a},t.wrapHeading=function(t){return t=(t+180)%360,0>t&&(t+=360),t-180},t.povToPixel2d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=180/Math.pow(2,o),l=h*(r/n),p=t.wrapHeading(e.heading-i.heading),c=e.pitch-i.pitch;return a.left+=p/h*n,a.top-=c/l*r,a},t.prototype.onAdd=function(){if(!this.marker_){var t=document.createElement("div");t.style.position="absolute",t.style.cursor="pointer",t.style.width=this.size_.width+"px",t.style.height=this.size_.height+"px",t.style.display=this.visible_?"block":"none",t.style.zIndex=this.zIndex_,this.id_&&(t.id=this.id_),this.className_&&(t.className=this.className_),this.title_&&(t.title=this.title_),this.icon_&&(t.style.backgroundImage="url("+this.icon_+")"),this.id_||this.className_||this.icon_||(t.style.backgroundImage="url(https://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png)"),this.marker_=t,this.getPanes().overlayMouseTarget.appendChild(t),window.addEventListener("resize",this.draw.bind(this)),this.povListener_=google.maps.event.addListener(this.getMap(),"pov_changed",this.draw.bind(this)),this.zoomListener_=google.maps.event.addListener(this.getMap(),"zoom_changed",this.draw.bind(this));var e="click";window.PointerEvent?e="pointerdown":window.MSPointerEvent&&(e="MSPointerDown"),t.addEventListener(e,this.onClick.bind(this),!1),this.draw()}},t.prototype.draw=function(){if(this.pano_){var t=this.povToPixel_(this.position_,this.pano_.getPov(),null!==this.pano_.getZoom()?this.pano_.getZoom():1,this.pano_.getContainer());null!==t?(this.marker_.style.left=t.left-this.anchor_.x+"px",this.marker_.style.top=t.top-this.anchor_.y+"px"):(this.marker_.style.left=-(9999+this.size_.width)+"px",this.marker_.style.top="0")}},t.prototype.onClick=function(t){this.clickable_&&google.maps.event.trigger(this,"click"),t.cancelBubble=!0,t.stopPropagation&&t.stopPropagation()},t.prototype.onRemove=function(){this.marker_&&(google.maps.event.removeListener(this.povListener_),google.maps.event.removeListener(this.zoomListener_),this.marker_.parentNode.removeChild(this.marker_),this.marker_=null)},t.prototype.getAnchor=function(){return this.anchor_},t.prototype.getClassName=function(){return this.className_},t.prototype.getClickable=function(){return this.clickable_},t.prototype.getIcon=function(){return this.icon_},t.prototype.getId=function(){return this.id_},t.prototype.getPano=function(){return this.pano_},t.prototype.getPosition=function(){return this.position_},t.prototype.getSize=function(){return this.size_},t.prototype.getTitle=function(){return this.title_},t.prototype.getVisible=function(){return this.visible_},t.prototype.getZIndex=function(){return this.zIndex_},t.prototype.setAnchor=function(t){this.anchor_=t,this.draw()},t.prototype.setClassName=function(t){this.className_=t,this.marker_&&(this.marker_.className=t)},t.prototype.setClickable=function(t){this.clickable_=t},t.prototype.setIcon=function(t){this.icon_=t,this.marker_&&(this.marker_.style.backgroundImage=t?"url("+t+")":"")},t.prototype.setId=function(t){this.id_=t,this.marker_&&(this.marker_.id=t)},t.prototype.setPano=function(e){if(e&&!(e instanceof google.maps.StreetViewPanorama))throw"PanoMarker only works inside a StreetViewPanorama.";if(this.povToPixel_=e&&("webgl"===e.mode||"html5"===e.mode||!e.mode&&window.chrome)||!e&&window.chrome?t.povToPixel3d:t.povToPixel2d,this.pano_&&this.onRemove(),this.setMap(e),this.pano_=e,e){var i=function(t){var e=function(){this.getPanes()&&(window.clearInterval(this.pollId_),this.onAdd(),t&&t(this))};this.pollId_=window.setInterval(e.bind(this),10)};if("undefined"!=typeof Promise)return new Promise(i.bind(this));i.call(this)}},t.prototype.setPosition=function(t){this.position_=t,this.draw()},t.prototype.setSize=function(t){this.size_=t,this.marker_&&(this.marker_.style.width=t.width+"px",this.marker_.style.height=t.height+"px",this.draw())},t.prototype.setTitle=function(t){this.title_=t,this.marker_&&(this.marker_.title=t)},t.prototype.setVisible=function(t){this.visible_=t,this.marker_&&(this.marker_.style.display=t?"block":"none")},t.prototype.setZIndex=function(t){this.zIndex_=t,this.marker_&&(this.marker_.style.zIndex=t)},t}); +!function(t,e){if("object"==typeof module&&"object"==typeof module.exports)module.exports=e();else if("function"==typeof define&&"object"==typeof define.amd)define(["goog!maps,3,other_params:[sensor=false&libraries=visualization]"],e);else{if("object"!=typeof google||"object"!=typeof google.maps)throw new Error("PanoMarker requires google maps library");t.PanoMarker=e()}}("undefined"!=typeof window?window:this,function(){var t=function(t){t=t||{},this.anchor_=t.anchor||new google.maps.Point(16,16),this.className_=t.className||null,this.clickable_=t.clickable||!0,this.icon_=t.icon||null,this.id_=t.id||null,this.marker_=null,this.pano_=null,this.pollId_=-1,this.position_=t.position||{heading:0,pitch:0},this.povListener_=null,this.zoomListener_=null,this.size_=t.size||new google.maps.Size(32,32),this.title_=t.title||"",this.visible_=t.visible||!0,this.zIndex_=t.zIndex||1,this.setPano(t.pano||null)};return t.prototype=new google.maps.OverlayView,t.get3dFov=function(t){return 2>=t?126.5-36.75*t:195.93/Math.pow(1.92,t)},t.povToPixel3d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=Math.PI/180,l=t.get3dFov(o)*h,p=i.heading*h,c=i.pitch*h,d=e.heading*h,_=e.pitch*h,u=n/2/Math.tan(l/2),m=Math.cos(_),f=Math.sin(_),g=Math.cos(d),y=Math.sin(d),w=u*m*y,v=u*m*g,k=u*f,b=Math.cos(c),P=Math.sin(c),x=Math.cos(p),z=Math.sin(p),M=u*b*z,I=u*b*x,N=u*P,L=M*w+I*v+N*k,T=M*M+I*I+N*N;if(Math.abs(L)<1e-6)return null;var C=T/L;if(0>C)return null;var S=C*w,E=C*v,A=C*k,j=-P*z,V=-P*x,H=b,Z=x,q=-z,R=0,W=Math.sqrt(Z*Z+q*q+R*R);Z/=W,q/=W,R/=W;var B=S*Z+E*q+A*R,F=S*j+E*V+A*H;return a.left+=B,a.top-=F,a},t.wrapHeading=function(t){return t=(t+180)%360,0>t&&(t+=360),t-180},t.povToPixel2d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=180/Math.pow(2,o),l=h*(r/n),p=t.wrapHeading(e.heading-i.heading),c=e.pitch-i.pitch;return a.left+=p/h*n,a.top-=c/l*r,a},t.prototype.onAdd=function(){if(!this.marker_){var t=document.createElement("div");t.style.position="absolute",t.style.cursor="pointer",t.style.width=this.size_.width+"px",t.style.height=this.size_.height+"px",t.style.display=this.visible_?"block":"none",t.style.zIndex=this.zIndex_,this.id_&&(t.id=this.id_),this.className_&&(t.className=this.className_),this.title_&&(t.title=this.title_),this.icon_&&(t.style.backgroundImage="url("+this.icon_+")"),this.id_||this.className_||this.icon_||(t.style.backgroundImage="url(https://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png)"),this.marker_=t,this.getPanes().overlayMouseTarget.appendChild(t),window.addEventListener("resize",this.draw.bind(this)),this.povListener_=google.maps.event.addListener(this.getMap(),"pov_changed",this.draw.bind(this)),this.zoomListener_=google.maps.event.addListener(this.getMap(),"zoom_changed",this.draw.bind(this));var e="click";window.PointerEvent?e="pointerdown":window.MSPointerEvent&&(e="MSPointerDown"),t.addEventListener(e,this.onClick.bind(this),!1),this.draw()}},t.prototype.draw=function(){if(this.pano_){var t=this.povToPixel_(this.position_,this.pano_.getPov(),null!==this.pano_.getZoom()?this.pano_.getZoom():1,this.pano_.getContainer());null!==t?(this.marker_.style.left=t.left-this.anchor_.x+"px",this.marker_.style.top=t.top-this.anchor_.y+"px"):(this.marker_.style.left=-(9999+this.size_.width)+"px",this.marker_.style.top="0")}},t.prototype.onClick=function(t){this.clickable_&&google.maps.event.trigger(this,"click"),t.cancelBubble=!0,t.stopPropagation&&t.stopPropagation()},t.prototype.onRemove=function(){this.marker_&&(google.maps.event.removeListener(this.povListener_),google.maps.event.removeListener(this.zoomListener_),this.marker_.parentNode.removeChild(this.marker_),this.marker_=null)},t.prototype.getAnchor=function(){return this.anchor_},t.prototype.getClassName=function(){return this.className_},t.prototype.getClickable=function(){return this.clickable_},t.prototype.getIcon=function(){return this.icon_},t.prototype.getId=function(){return this.id_},t.prototype.getPano=function(){return this.pano_},t.prototype.getPosition=function(){return this.position_},t.prototype.getSize=function(){return this.size_},t.prototype.getTitle=function(){return this.title_},t.prototype.getVisible=function(){return this.visible_},t.prototype.getZIndex=function(){return this.zIndex_},t.prototype.setAnchor=function(t){this.anchor_=t,this.draw()},t.prototype.setClassName=function(t){this.className_=t,this.marker_&&(this.marker_.className=t)},t.prototype.setClickable=function(t){this.clickable_=t},t.prototype.setIcon=function(t){this.icon_=t,this.marker_&&(this.marker_.style.backgroundImage=t?"url("+t+")":"")},t.prototype.setId=function(t){this.id_=t,this.marker_&&(this.marker_.id=t)},t.prototype.setPano=function(e){if(e&&!(e instanceof google.maps.StreetViewPanorama))throw"PanoMarker only works inside a StreetViewPanorama.";if(this.povToPixel_=e&&("webgl"===e.mode||"html5"===e.mode||!e.mode&&window.chrome)||!e&&window.chrome?t.povToPixel3d:t.povToPixel2d,this.pano_&&this.onRemove(),this.setMap(e),this.pano_=e,e){var i=function(t){var e=function(){this.getPanes()&&(window.clearInterval(this.pollId_),this.onAdd(),t&&t(this))};this.pollId_=window.setInterval(e.bind(this),10)};if("undefined"!=typeof Promise)return new Promise(i.bind(this));i.call(this)}},t.prototype.setPosition=function(t){this.position_=t,this.draw()},t.prototype.setSize=function(t){this.size_=t,this.marker_&&(this.marker_.style.width=t.width+"px",this.marker_.style.height=t.height+"px",this.draw())},t.prototype.setTitle=function(t){this.title_=t,this.marker_&&(this.marker_.title=t)},t.prototype.setVisible=function(t){this.visible_=t,this.marker_&&(this.marker_.style.display=t?"block":"none")},t.prototype.setZIndex=function(t){this.zIndex_=t,this.marker_&&(this.marker_.style.zIndex=t)},t}); From 1f45ca58a40940f1c9b54570daf837240d0f8810 Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Sun, 3 Apr 2016 13:27:00 +0200 Subject: [PATCH 5/9] updated bower.json --- .gitignore | 1 + bower.json | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 27d46f3..81abe7b 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules *~ .DS_Store *.sublime-* +.idea diff --git a/bower.json b/bower.json index 3b852aa..349eef6 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,12 @@ { "name": "google-maps-api-addons", "version": "1.0.0", - "homepage": "https://github.com/marmat/google-maps-api-addons", + "homepage": "https://github.com/theodoor82/google-maps-api-addons/", "authors": [ - "Martin Matysiak " + "Martin Matysiak ", + "Theo van Oostrum " ], - "description": "A set of useful scripts for the Google Maps API", + "description": "A fork of the original project: A set of useful scripts for the Google Maps API", "keywords": [ "google", "maps", From 26dc86a983356f34530ae9d9d6db47fa6e71c6b8 Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Sun, 3 Apr 2016 13:30:01 +0200 Subject: [PATCH 6/9] updated version to 1.1.0 --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 349eef6..6237d27 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "google-maps-api-addons", - "version": "1.0.0", + "version": "1.1.0", "homepage": "https://github.com/theodoor82/google-maps-api-addons/", "authors": [ "Martin Matysiak ", From 143d94d4d188bb967bbe5ed2fdef041864315d53 Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Sun, 17 Apr 2016 22:12:55 +0200 Subject: [PATCH 7/9] use GoogleMaps instead of goog --- package.json | 2 +- panomarker/src/panomarker.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6857a07..9bd7023 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "google-maps-api-addons", - "version": "1.0.0", + "version": "1.1.1", "description": "A set of useful scripts for the Google Maps API", "main": "panomarker/src/panomarker.js", "scripts": { diff --git a/panomarker/src/panomarker.js b/panomarker/src/panomarker.js index 39d23b0..ce788eb 100644 --- a/panomarker/src/panomarker.js +++ b/panomarker/src/panomarker.js @@ -57,7 +57,7 @@ if (typeof module === 'object' && typeof module.exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && typeof define.amd === 'object') { - define(['goog!maps,3,other_params:[sensor=false&libraries=visualization]'], + define(['GoogleMaps!'], factory); } else { if (typeof google !== 'object' || typeof google.maps !== 'object') { From 2c9318eb1fda1c8169b81a0e06ebfe35b32d55c0 Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Sun, 17 Apr 2016 22:15:21 +0200 Subject: [PATCH 8/9] use GoogleMaps instead of goog --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9bd7023..3256400 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "google-maps-api-addons", - "version": "1.1.1", + "version": "1.1.2", "description": "A set of useful scripts for the Google Maps API", "main": "panomarker/src/panomarker.js", "scripts": { From 97f2d1e5069c932bfc36716c4911ed4f4a31ebc5 Mon Sep 17 00:00:00 2001 From: Theo van Oostrum Date: Tue, 4 Apr 2017 11:14:14 +0700 Subject: [PATCH 9/9] Use canvas.getContext to determine whether rendering is done in 2d or 3d --- bower.json | 9 ++++----- package.json | 4 ++-- panomarker/src/panomarker.js | 32 +++++++++++++++----------------- panomarker/src/panomarker.min.js | 2 +- 4 files changed, 22 insertions(+), 25 deletions(-) diff --git a/bower.json b/bower.json index 6237d27..6b1a958 100644 --- a/bower.json +++ b/bower.json @@ -1,12 +1,11 @@ { "name": "google-maps-api-addons", "version": "1.1.0", - "homepage": "https://github.com/theodoor82/google-maps-api-addons/", + "homepage": "https://github.com/marmat/google-maps-api-addons", "authors": [ - "Martin Matysiak ", - "Theo van Oostrum " + "Martin Matysiak " ], - "description": "A fork of the original project: A set of useful scripts for the Google Maps API", + "description": "A set of useful scripts for the Google Maps API", "keywords": [ "google", "maps", @@ -26,4 +25,4 @@ "test", "tests" ] -} +} \ No newline at end of file diff --git a/package.json b/package.json index 3256400..7e9dea8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "google-maps-api-addons", - "version": "1.1.2", + "version": "1.1.0", "description": "A set of useful scripts for the Google Maps API", "main": "panomarker/src/panomarker.js", "scripts": { @@ -36,4 +36,4 @@ "gulp-rename": "^1.2.0", "gulp-uglify": "^1.1.0" } -} +} \ No newline at end of file diff --git a/panomarker/src/panomarker.js b/panomarker/src/panomarker.js index 77bb5d3..d08c3e8 100644 --- a/panomarker/src/panomarker.js +++ b/panomarker/src/panomarker.js @@ -57,7 +57,7 @@ if (typeof module === 'object' && typeof module.exports === 'object') { module.exports = factory(); } else if (typeof define === 'function' && typeof define.amd === 'object') { - define(['GoogleMaps!'], + define(['goog!maps,3,other_params:[sensor=false&libraries=visualization]'], factory); } else { if (typeof google !== 'object' || typeof google.maps !== 'object') { @@ -140,6 +140,20 @@ var PanoMarker = function(opts) { /** @private @type {number} */ this.zIndex_ = opts.zIndex || 1; + /** Check whether to use 2d or 3d rendering by looking up a canvas in the container and checking its context */ + this.is3D = function() { + var canvasList = this.container_.getElementsByTagName('canvas'); + if (canvasList.length > 0) { + var canvas = canvasList[0]; + if (canvas && (canvas.getContext("experimental-webgl") || canvas.getContext("webgl"))) { + return true; + } + } + return false; + }; + + this.povToPixel_ = this.is3D() ? PanoMarker.povToPixel3d : PanoMarker.povToPixel2d; + // At last, call some methods which use the initialized parameters this.setPano(opts.pano || null, opts.container); }; @@ -574,20 +588,6 @@ PanoMarker.prototype.setPano = function(pano, container) { throw 'PanoMarker only works inside a StreetViewPanorama.'; } - /** - * Rendering panoramas in a 3D sphere can be configured using the (undocumented) StreetViewPanorama.mode setting. - * (see: https://groups.google.com/forum/#!msg/google-maps-js-api-v3/FNP2INYAUpw/LurOZk0bX_EJ) - * Possible values are: "html4", "html5", and "webgl". Using "webgl" will cause Rendering in a 3D sphere. - * Currently only Chrome is rendering panoramas in a 3D sphere by default. For other browsers this has to be - * configured explicitly. By default other browsers are just showing the raw panorama tiles and pan them around. - * - * @private - * @type {function(StreetViewPov, StreetViewPov, number, Element): Object} - */ - this.povToPixel_ = (!!pano && (pano.mode === "webgl" || pano.mode === "html5" || !pano.mode && !!window.chrome)) || (!pano && !!window.chrome) ? - PanoMarker.povToPixel3d : - PanoMarker.povToPixel2d; - // Remove the marker if it previously was on a panorama if (!!this.pano_) { this.onRemove(); @@ -623,14 +623,12 @@ PanoMarker.prototype.setPano = function(pano, container) { } }; - /** @param {google.maps.StreetViewPov} position The desired position. */ PanoMarker.prototype.setPosition = function(position) { this.position_ = position; this.draw(); }; - /** @param {google.maps.Size} size The new size. */ PanoMarker.prototype.setSize = function(size) { this.size_ = size; diff --git a/panomarker/src/panomarker.min.js b/panomarker/src/panomarker.min.js index 8cf24ab..ab69424 100644 --- a/panomarker/src/panomarker.min.js +++ b/panomarker/src/panomarker.min.js @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -!function(t,e){if("object"==typeof module&&"object"==typeof module.exports)module.exports=e();else if("function"==typeof define&&"object"==typeof define.amd)define(["goog!maps,3,other_params:[sensor=false&libraries=visualization]"],e);else{if("object"!=typeof google||"object"!=typeof google.maps)throw new Error("PanoMarker requires google maps library");t.PanoMarker=e()}}("undefined"!=typeof window?window:this,function(){var t=function(t){t=t||{},this.anchor_=t.anchor||new google.maps.Point(16,16),this.className_=t.className||null,this.clickable_=t.clickable||!0,this.icon_=t.icon||null,this.id_=t.id||null,this.marker_=null,this.pano_=null,this.pollId_=-1,this.position_=t.position||{heading:0,pitch:0},this.povListener_=null,this.zoomListener_=null,this.size_=t.size||new google.maps.Size(32,32),this.title_=t.title||"",this.visible_=t.visible||!0,this.zIndex_=t.zIndex||1,this.setPano(t.pano||null)};return t.prototype=new google.maps.OverlayView,t.get3dFov=function(t){return 2>=t?126.5-36.75*t:195.93/Math.pow(1.92,t)},t.povToPixel3d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=Math.PI/180,l=t.get3dFov(o)*h,p=i.heading*h,c=i.pitch*h,d=e.heading*h,_=e.pitch*h,u=n/2/Math.tan(l/2),m=Math.cos(_),f=Math.sin(_),g=Math.cos(d),y=Math.sin(d),w=u*m*y,v=u*m*g,k=u*f,b=Math.cos(c),P=Math.sin(c),x=Math.cos(p),z=Math.sin(p),M=u*b*z,I=u*b*x,N=u*P,L=M*w+I*v+N*k,T=M*M+I*I+N*N;if(Math.abs(L)<1e-6)return null;var C=T/L;if(0>C)return null;var S=C*w,E=C*v,A=C*k,j=-P*z,V=-P*x,H=b,Z=x,q=-z,R=0,W=Math.sqrt(Z*Z+q*q+R*R);Z/=W,q/=W,R/=W;var B=S*Z+E*q+A*R,F=S*j+E*V+A*H;return a.left+=B,a.top-=F,a},t.wrapHeading=function(t){return t=(t+180)%360,0>t&&(t+=360),t-180},t.povToPixel2d=function(e,i,o,s){var n=s.offsetWidth,r=s.offsetHeight,a={left:n/2,top:r/2},h=180/Math.pow(2,o),l=h*(r/n),p=t.wrapHeading(e.heading-i.heading),c=e.pitch-i.pitch;return a.left+=p/h*n,a.top-=c/l*r,a},t.prototype.onAdd=function(){if(!this.marker_){var t=document.createElement("div");t.style.position="absolute",t.style.cursor="pointer",t.style.width=this.size_.width+"px",t.style.height=this.size_.height+"px",t.style.display=this.visible_?"block":"none",t.style.zIndex=this.zIndex_,this.id_&&(t.id=this.id_),this.className_&&(t.className=this.className_),this.title_&&(t.title=this.title_),this.icon_&&(t.style.backgroundImage="url("+this.icon_+")"),this.id_||this.className_||this.icon_||(t.style.backgroundImage="url(https://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png)"),this.marker_=t,this.getPanes().overlayMouseTarget.appendChild(t),window.addEventListener("resize",this.draw.bind(this)),this.povListener_=google.maps.event.addListener(this.getMap(),"pov_changed",this.draw.bind(this)),this.zoomListener_=google.maps.event.addListener(this.getMap(),"zoom_changed",this.draw.bind(this));var e="click";window.PointerEvent?e="pointerdown":window.MSPointerEvent&&(e="MSPointerDown"),t.addEventListener(e,this.onClick.bind(this),!1),this.draw()}},t.prototype.draw=function(){if(this.pano_){var t=this.povToPixel_(this.position_,this.pano_.getPov(),null!==this.pano_.getZoom()?this.pano_.getZoom():1,this.pano_.getContainer());null!==t?(this.marker_.style.left=t.left-this.anchor_.x+"px",this.marker_.style.top=t.top-this.anchor_.y+"px"):(this.marker_.style.left=-(9999+this.size_.width)+"px",this.marker_.style.top="0")}},t.prototype.onClick=function(t){this.clickable_&&google.maps.event.trigger(this,"click"),t.cancelBubble=!0,t.stopPropagation&&t.stopPropagation()},t.prototype.onRemove=function(){this.marker_&&(google.maps.event.removeListener(this.povListener_),google.maps.event.removeListener(this.zoomListener_),this.marker_.parentNode.removeChild(this.marker_),this.marker_=null)},t.prototype.getAnchor=function(){return this.anchor_},t.prototype.getClassName=function(){return this.className_},t.prototype.getClickable=function(){return this.clickable_},t.prototype.getIcon=function(){return this.icon_},t.prototype.getId=function(){return this.id_},t.prototype.getPano=function(){return this.pano_},t.prototype.getPosition=function(){return this.position_},t.prototype.getSize=function(){return this.size_},t.prototype.getTitle=function(){return this.title_},t.prototype.getVisible=function(){return this.visible_},t.prototype.getZIndex=function(){return this.zIndex_},t.prototype.setAnchor=function(t){this.anchor_=t,this.draw()},t.prototype.setClassName=function(t){this.className_=t,this.marker_&&(this.marker_.className=t)},t.prototype.setClickable=function(t){this.clickable_=t},t.prototype.setIcon=function(t){this.icon_=t,this.marker_&&(this.marker_.style.backgroundImage=t?"url("+t+")":"")},t.prototype.setId=function(t){this.id_=t,this.marker_&&(this.marker_.id=t)},t.prototype.setPano=function(e){if(e&&!(e instanceof google.maps.StreetViewPanorama))throw"PanoMarker only works inside a StreetViewPanorama.";if(this.povToPixel_=e&&("webgl"===e.mode||"html5"===e.mode||!e.mode&&window.chrome)||!e&&window.chrome?t.povToPixel3d:t.povToPixel2d,this.pano_&&this.onRemove(),this.setMap(e),this.pano_=e,e){var i=function(t){var e=function(){this.getPanes()&&(window.clearInterval(this.pollId_),this.onAdd(),t&&t(this))};this.pollId_=window.setInterval(e.bind(this),10)};if("undefined"!=typeof Promise)return new Promise(i.bind(this));i.call(this)}},t.prototype.setPosition=function(t){this.position_=t,this.draw()},t.prototype.setSize=function(t){this.size_=t,this.marker_&&(this.marker_.style.width=t.width+"px",this.marker_.style.height=t.height+"px",this.draw())},t.prototype.setTitle=function(t){this.title_=t,this.marker_&&(this.marker_.title=t)},t.prototype.setVisible=function(t){this.visible_=t,this.marker_&&(this.marker_.style.display=t?"block":"none")},t.prototype.setZIndex=function(t){this.zIndex_=t,this.marker_&&(this.marker_.style.zIndex=t)},t}); +!function(t,e){if("object"==typeof module&&"object"==typeof module.exports)module.exports=e();else if("function"==typeof define&&"object"==typeof define.amd)define(["goog!maps,3,other_params:[sensor=false&libraries=visualization]"],e);else{if("object"!=typeof google||"object"!=typeof google.maps)throw new Error("PanoMarker requires google maps library");t.PanoMarker=e()}}("undefined"!=typeof window?window:this,function(){var t=function(e){if(e=e||{},!e.container)throw"A panorama container needs to be defined.";this.container_=e.container,this.anchor_=e.anchor||new google.maps.Point(16,16),this.className_=e.className||null,this.clickable_=e.clickable||!0,this.icon_=e.icon||null,this.id_=e.id||null,this.marker_=null,this.pano_=null,this.pollId_=-1,this.position_=e.position||{heading:0,pitch:0},this.povListener_=null,this.zoomListener_=null,this.size_=e.size||new google.maps.Size(32,32),this.title_=e.title||"",this.visible_="boolean"!=typeof e.visible||e.visible,this.zIndex_=e.zIndex||1,this.is3D=function(){var t=this.container_.getElementsByTagName("canvas");if(t.length>0){var e=t[0];if(e&&(e.getContext("experimental-webgl")||e.getContext("webgl")))return!0}return!1},this.povToPixel_=this.is3D()?t.povToPixel3d:t.povToPixel2d,this.setPano(e.pano||null,e.container)};return t.prototype=new google.maps.OverlayView,t.get3dFov=function(t){return t<=2?126.5-36.75*t:195.93/Math.pow(1.92,t)},t.povToPixel3d=function(e,i,o,n){var s=n.offsetWidth,r=n.offsetHeight,a={left:s/2,top:r/2},h=Math.PI/180,l=t.get3dFov(o)*h,p=i.heading*h,c=i.pitch*h,d=e.heading*h,_=e.pitch*h,g=s/2/Math.tan(l/2),u=Math.cos(_),m=Math.sin(_),f=Math.cos(d),y=Math.sin(d),v=g*u*y,w=g*u*f,k=g*m,b=Math.cos(c),x=Math.sin(c),P=Math.cos(p),z=Math.sin(p),M=g*b*z,I=g*b*P,N=g*x,L=M*v+I*w+N*k,C=M*M+I*I+N*N;if(Math.abs(L)<1e-6)return null;var T=C/L;if(T<0)return null;var E=T*v,S=T*w,j=T*k,A=-x*z,V=-x*P,H=b,Z=P,D=-z,q=0,B=Math.sqrt(Z*Z+D*D+q*q);Z/=B,D/=B,q/=B;var F=E*Z+S*D+j*q,R=E*A+S*V+j*H;return a.left+=F,a.top-=R,a},t.wrapHeading=function(t){return t=(t+180)%360,t<0&&(t+=360),t-180},t.povToPixel2d=function(e,i,o,n){var s=n.offsetWidth,r=n.offsetHeight,a={left:s/2,top:r/2},h=180/Math.pow(2,o),l=h*(r/s),p=t.wrapHeading(e.heading-i.heading),c=e.pitch-i.pitch;return a.left+=p/h*s,a.top-=c/l*r,a},t.prototype.onAdd=function(){if(!this.marker_){var t=document.createElement("div");t.style.position="absolute",t.style.cursor="pointer",t.style.width=this.size_.width+"px",t.style.height=this.size_.height+"px",t.style.display=this.visible_?"block":"none",t.style.zIndex=this.zIndex_,this.id_&&(t.id=this.id_),this.className_&&(t.className=this.className_),this.title_&&(t.title=this.title_),this.icon_&&(t.style.backgroundImage="url("+this.icon_+")"),this.id_||this.className_||this.icon_||(t.style.backgroundImage="url(https://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png)"),this.marker_=t,this.getPanes().overlayMouseTarget.appendChild(t),window.addEventListener("resize",this.draw.bind(this)),this.povListener_=google.maps.event.addListener(this.getMap(),"pov_changed",this.draw.bind(this)),this.zoomListener_=google.maps.event.addListener(this.getMap(),"zoom_changed",this.draw.bind(this));var e="click";window.PointerEvent?e="pointerdown":window.MSPointerEvent&&(e="MSPointerDown"),t.addEventListener(e,this.onClick.bind(this),!1),this.draw(),google.maps.event.trigger(this,"add",this.marker_)}},t.prototype.draw=function(){if(this.pano_){var t=this.povToPixel_(this.position_,this.pano_.getPov(),"undefined"!=typeof this.pano_.getZoom()?this.pano_.getZoom():1,this.container_);null!==t?(this.marker_.style.left=t.left-this.anchor_.x+"px",this.marker_.style.top=t.top-this.anchor_.y+"px"):(this.marker_.style.left=-(9999+this.size_.width)+"px",this.marker_.style.top="0")}},t.prototype.onClick=function(t){this.clickable_&&google.maps.event.trigger(this,"click"),t.cancelBubble=!0,t.stopPropagation&&t.stopPropagation()},t.prototype.onRemove=function(){this.marker_&&(google.maps.event.removeListener(this.povListener_),google.maps.event.removeListener(this.zoomListener_),this.marker_.parentNode.removeChild(this.marker_),this.marker_=null,google.maps.event.trigger(this,"remove"))},t.prototype.getAnchor=function(){return this.anchor_},t.prototype.getClassName=function(){return this.className_},t.prototype.getClickable=function(){return this.clickable_},t.prototype.getIcon=function(){return this.icon_},t.prototype.getId=function(){return this.id_},t.prototype.getPano=function(){return this.pano_},t.prototype.getPosition=function(){return this.position_},t.prototype.getSize=function(){return this.size_},t.prototype.getTitle=function(){return this.title_},t.prototype.getVisible=function(){return this.visible_},t.prototype.getZIndex=function(){return this.zIndex_},t.prototype.setAnchor=function(t){this.anchor_=t,this.draw()},t.prototype.setClassName=function(t){this.className_=t,this.marker_&&(this.marker_.className=t)},t.prototype.setClickable=function(t){this.clickable_=t},t.prototype.setIcon=function(t){this.icon_=t,this.marker_&&(this.marker_.style.backgroundImage=t?"url("+t+")":"")},t.prototype.setId=function(t){this.id_=t,this.marker_&&(this.marker_.id=t)},t.prototype.setPano=function(t,e){if(t&&!(t instanceof google.maps.StreetViewPanorama))throw"PanoMarker only works inside a StreetViewPanorama.";if(this.pano_&&this.onRemove(),this.setMap(t),this.pano_=t,this.container_=e,t){var i=function(t){var e=function(){this.getPanes()&&(window.clearInterval(this.pollId_),this.onAdd(),t&&t(this))};this.pollId_=window.setInterval(e.bind(this),10)};if("undefined"!=typeof Promise)return new Promise(i.bind(this));i.call(this)}},t.prototype.setPosition=function(t){this.position_=t,this.draw()},t.prototype.setSize=function(t){this.size_=t,this.marker_&&(this.marker_.style.width=t.width+"px",this.marker_.style.height=t.height+"px",this.draw())},t.prototype.setTitle=function(t){this.title_=t,this.marker_&&(this.marker_.title=t)},t.prototype.setVisible=function(t){this.visible_=t,this.marker_&&(this.marker_.style.display=t?"block":"none")},t.prototype.setZIndex=function(t){this.zIndex_=t,this.marker_&&(this.marker_.style.zIndex=t)},t}); \ No newline at end of file