SYNCERのロゴ
アイキャッチ画像

StreetViewPanoramaOptions

StreetViewPanoramaOptionsは、ストリートビューの設定を調整するためのオブジェクトです。ストリートビューを表示する時のStreetViewPanoramaクラスの引数などに利用できます。

プロパティ

プロパティ名説明
addressControl

boolean

trueなら表示、falseなら非表示になる。

addressControlOptions

StreetViewAddressControlOptions

専用のオブジェクトを指定します。2017年現在、指定できるのは表示位置(position)のみです。

clickToGo

boolean

trueならクリックによる位置変更が有効、falseなら無効。

disableDefaultUI

boolean

trueなら各コントローラが非表示になる。falseなら表示。

disableDoubleClickZoom

boolean

trueならダブルクリックによるズームアップが無効になる。falseなら有効。

enableCloseButton

boolean

trueなら閉じるボタンを表示、falseなら非表示。

fullscreenControl

boolean

trueならフルスクリーン・コントローラを表示、falseなら非表示。

fullscreenControlOptions

FullscreenControlOptions

値は専用のオブジェクトで指定します。2017年現在は、表示位置だけを調整できます。

imageDateControl

boolean

trueなら画像の撮影日を表示、falseなら非表示。

linksControl

boolean

trueなら矢印のコントローラを表示、falseなら非表示。

motionTracking

boolean

trueならモーション・トラッキングが有効、falseなら無効。

motionTrackingControl

boolean

trueならモーション・トラッキング・コントローラを表示、falseなら非表示。

motionTrackingControlOptions

MotionTrackingControlOptions

値は専用のオブジェクトで指定します。2017年現在は、表示位置だけを調整できます。

panControl

boolean

trueなら表示、falseなら非表示。

panControlOptions

PanControlOptions

値は専用のオブジェクトで指定します。2017年現在は、表示位置だけを調整できます。

pano

string

画像に紐付けられたパノラマID。

position

LatLng|LatLngLiteral

位置座標を表すLatLngクラスのインスタンス、またはLatLngLiteralオブジェクト。

pov

StreetViewPov

方向と角度とズーム値を、StreetViewPovオブジェクトで指定する。ズーム値のみ、省略可。

scrollwheel

boolean

trueならホイール操作によるズーム値の変更が有効、falseなら無効。

showRoadLabels

boolean

trueなら道路名を表示、falseなら非表示。

visible

boolean

trueなら表示状態、falseなら非表示状態。

zoom

number

ズーム値を数値で指定する。位置によって違うが、0〜6くらいまで対応している。

zoomControl

boolean

trueならズーム・コントローラを表示、falseなら非表示。

zoomControlOptions

ZoomControlOptions

専用のZoomControlOptionsオブジェクト。2017年現在、指定できるプロパティはposition(表示位置)のみ。

デモ

StreetViewPanoramaOptionsオブジェクトを利用して、ストリートビューのインスタンスを作成するデモです。各プロパティの値を調整して、どのように反映されるのかを確認してみて下さい。

var options = {
	position: new google.maps.LatLng( 43.062092171763695,141.35175298175355 ) ,
	pano: "zpnYrSDeUCxDF7y2P9Nlrg" ,
	addressControl: false ,
	clickToGo: false ,
	disableDefaultUI: true ,
	disableDoubleClickZoom: true ,
	enableCloseButton: true ,
	fullscreenControl: false ,
	imageDateControl: true ,
	linksControl: false ,
	motionTracking: false ,
	pov: {
		heading: 100 ,
		pitch: 0 ,
		zoom: 1 ,
	} ,
	scrollwheel: false ,
	showRoadLabels: false ,
	visible: false ,
	zoomControl: false ,
} ;

var streetViewPanorama = new google.maps.StreetViewPanorama( container, options ) ;

サンプルコード

<!DOCTYPE html>
<html>
<head>
	<style>
#streetview-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="streetview-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	<script>
var container = document.getElementById( "streetview-canvas" ) ;

// StreetViewPanorama
var options = {
	position: new google.maps.LatLng( 43.062092171763695,141.35175298175355 ) ,
	pano: "zpnYrSDeUCxDF7y2P9Nlrg" ,
	addressControl: true ,
	clickToGo: true ,
	disableDefaultUI: true ,
	disableDoubleClickZoom: true ,
	enableCloseButton: true ,
	fullscreenControl: false ,
	imageDateControl: true ,
	linksControl: false ,
	motionTracking: false ,
	pov: {
		heading: 100 ,
		pitch: 0 ,
		zoom: 1 ,
	} ,
	scrollwheel: false ,
	showRoadLabels: false ,
//	visible: false ,
	zoomControl: false ,
} ;

var streetViewPanorama = new google.maps.StreetViewPanorama( container, options ) ;
	</script>
</body>
</html>

デモページを開く

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2015年9月1日 (火)
コンテンツを公開しました。