SQLの窓

2013年11月09日


Google ストリートビューのパノラマを自分のブログに設置する方法

コードサンプルの streetview-simple を jQuery で簡略化しています。

※ jQuery は、Google がホスティングしているものです。

heading と pitch は、こちらで動かしながら取得できます( 最後に設定変更ボタン )

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/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);
		$( this ).data( "pano", new google.maps.StreetViewPanorama($(this)[0],{ position: pos }) );
		return this;
	}, 
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		$( this ).data( "pano" ).setPov(pov);
		return this;
	} 
});

$(function(){
	$('#pano')
	.StreetView(35.658069,139.745016)
	.StreetViewPov(33.69,41.62)
	.css("width","600px")
	.css("height","450px");

});
</script>
<div id="pano"></div>


posted by at 15:31 | Google | このブログの読者になる | 更新情報をチェックする