Highslide JSとストリートビュー

ヘッド部

<head>
<script type="text/javascript">
ggmap_apikey = "APIキー";
</script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/createPano.js"></script>
</head>

※ APIキー取得
※ ローカルでテストする場合は、APIキーは必要ありません

ストリートビュー/水上バス/アクアライナー

パノラマ/水上バス/アクアライナー

Highslide JS

貼り付け

<script
 charset="utf-8"
 type="text/javascript"
 src="http://yourdomain.jp/hs/highslide/highslide-with-html.js"></script>
<link href="http://yourdomain.jp/hs/highslide/highslide.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
    hs.graphicsDir = 'http://yourdomain.jp/hs/highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.showCredits = false;
    hs.marginLeft = 100;
    hs.marginTop = 100;
</script>

<a class="highslide" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html',width: 600 } )" href="#">ストリートビュー/水上バス/アクアライナー</a>
<div class="highslide-html-content" id="highslide-html">

<div class="highslide-header">
<ul style='float:right'>
<li class="highslide-move"><a href="#" onclick="return false">ここをドラッグして移動</a></li>
<li class="highslide-close"><a href="#" onclick="return hs.close(this)">閉じる</a></li>
</ul>
パノラマ/水上バス/アクアライナー
</div>

<div class="highslide-body">
<script type="text/javascript">
createPanoArea(600,400,34.690868,135.531079,226.98,5.51);
</script>
</div>

<div class="highslide-footer">
<div>
<span class="highslide-resize" title="Resize">
<span></span>
</span>
</div>
</div>

</div>


Highslide JS と Google ストリートビューを合体(2)
※ パノラマを単純に貼り付ける場合はこちら
※ 座標を取得して貼り付けコードを作成するツール