<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
StreetView : function(a,b){
var pos = new google.maps.LatLng(a,b);
// jQuery オブジェクトに StreetViewPanorama をセット(後で使用します)
this
.data( "pano",
new google.maps.StreetViewPanorama(
this[0],
{ position: pos }
)
);
// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
return this;
},
// 向き と 上下 の値をセットします
StreetViewPov : function(a,b){
var pov = {
heading: a,
pitch: b
}
// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
this.data( "pano" ).setPov(pov);
// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
return this;
},
// 拡大率をセットします( 0 〜 5 / 小数以下あり )
StreetViewZoom : function(a){
// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
this.data( "pano" ).setZoom(a);
// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
return this;
},
StreetViewOptions( a ) {
// jQuery オブジェクトにセットした StreetViewPanorama を使用しています
$( this ).data( "pano" ).setOptions(a);
// プラグインの戻り値の無い処理の標準仕様として自分自身を返す
return this;
},
StreetViewOnSh: function( callback ) {
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf("iphone") > -1 || ua.indexOf("android") > -1 ) {
(callback.bind(this,ua,this.data( "pano" )))();
}
return this;
},
StreetViewOnPc: function( callback ) {
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf("iphone") <= -1 && ua.indexOf("android") <= -1 ) {
(callback.bind(this,ua,this.data( "pano" )))();
}
return this;
}
});
$(function(){
$('#pano_40671578')
.StreetView(40.671578,-73.962557)
.StreetViewPov(-128,10)
.StreetViewOnPc( function(userAgent,StreetViewPanorama){
// PC の場合の処理
this.css("width","600px");
this.css("height","400px");
// 追加のブラウザ判定に使用する
console.log(userAgent);
// 実装していない処理は、直接実行
console.log(StreetViewPanorama.getPov())
})
.StreetViewOnSh( function(userAgent,StreetViewPanorama){
// スマホ の場合の処理
this.css("cssText","width:290px!important;height:290px!important");
this.StreetViewZoom(2.5);
// 追加のブラウザ判定に使用する
console.log(userAgent);
// 実装していない処理は、直接実行
console.log(StreetViewPanorama.getZoom())
})
;
// PC と スマホ 共通な場合
$('#pano_40671578_b')
.StreetView(40.671578,-73.962557)
.StreetViewPov(-106.13,8.69)
.StreetViewZoom(2.65)
.StreetViewOptions({
/* addressControl: false, */
/* zoomControl: false, */
/* panControl: false, */
scrollwheel: false,
disableDefaultUI: true
})
.css("width","600px")
.css("height","480px")
.css("margin-top","10px")
;
});
</script>
<div id="pano_40671578"></div>
<div id="pano_40671578_b"></div>
▼ デモ実行
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
