Shadowbox.js と Google ストリートビュー

  A 要素と rel 属性による通常呼び出しで実装します



shadowbox は、ブラウザが標準モードでしか動作しませんので、IE の場合は注意です

▼ クリックすると shadowbox が起動します
エッフェル塔
風車

ggv_pano_basic.php と shadowbox を使ったリンクの作成

w=600&h=400 のようにしてストリートビュー側も大きさを変更をできますが( デフォルト600x400 )、
サイズは shadowbox と一致させて下さい。


Shadowbox_sview

実際のテストは、こちらで出来ます

右側の一番下のテキストエリアへ shadowbox 用のリンクを貼り付けて、shadowbox
ライブラリのチェックを付けてプレビューが可能です




関連する記事

Google ストリートビュー埋め込みライブラリ
パノラマパーツの使い方 :琴線に触れる
( 座標の取得方法はこちらをご覧下さい )
Google ストリートピューを表示させたまま、移動してAPI用貼り付けコードを取得していくオンラインサービスの使い方
( 移動しながらの座標の取得方法はこちらをご覧下さい )


関連する外部リンク

DOCTYPE スイッチの一覧表








  ggv_pano_basic.php で単独の単純なストリートビューを表示します



  
<?
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

$api_key
 = 'サイトの Map APIキー';

if ( $_GET['w'] == '' ) {
	$_GET['w'] = 600;
}
if ( $_GET['h'] == '' ) {
	$_GET['h'] = 400;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:v="urn:schemas-microsoft-com:vml"
>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>

<script
	src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<?= $api_key ?>"
	type="text/javascript"
></script>

<script type="text/javascript">
var myPano;
var mylat,mylng;

function initialize() {

	myPano = new GStreetviewPanorama(document.getElementById("pano"));
	var fenwayPark = new GLatLng(<?=$_GET['a']?>,<?=$_GET['b']?>);
	myPOV = {yaw:<?=$_GET['c']?>,pitch:<?=$_GET['d']?>,zoom:0};
	myPano.setLocationAndPOV(fenwayPark, myPOV);
	GEvent.addListener(myPano, "error", handleNoFlash);
	GEvent.addListener(myPano, "initialized", getTargetLatLng);

}

function handleNoFlash(errorCode) {

	if (errorCode == 603) {
		alert("Error: Flash doesn't appear to be supported by your browser");
		return;
	}
}

function getTargetLatLng(myLocation) {
	mylat = myLocation.latlng.lat();
	mylng = myLocation.latlng.lng();
	try {
		parent.document.getElementById("lat").value = mylat;
		parent.document.getElementById("lng").value = mylng;
		parent.iframePano = myPano;
	}
	catch(e){};
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div name="pano" id="pano" style='width:<?= $_GET['w'] ?>px;height:<?= $_GET['h'] ?>px;'></div>
</body>
</html>
  



  補足 : shadowbox オプション

2010/02/17 現在、3.0.1 でこのオプションが動作しないようなので注意して下さい

▼ 以下をごらん下さい
Shadowbox.js : 3.0.1 使用時の注意事項

options={counterType:'skip',continuous:true}

counterType:'skip' は、ページリンクが左下に表示されるようになります
continuous:true は、最後と最初の間を前後ナビゲートで移動できるようになります

エッフェル塔
風車

  
<a
	rel="shadowbox[sview2];width=600;height=400;options={counterType:'skip',continuous:true}"
	href="http://lightbox.on.coocan.jp/ggv_pano_basic.php?a=48.857288&b=2.294404&c=8.24369085737899&d=-40"
>エッフェル塔</a>
<br>
<a
	rel="shadowbox[sview2];width=600;height=400;options={counterType:'skip',continuous:true}"
	href="http://lightbox.on.coocan.jp/ggv_pano_basic.php?a=52.34176&b=4.792075&c=162&d=-24"
>風車</a>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ