<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/01/stviewjs.jpg" alt="ストリートビューをカンタンに表示させられる「stview.js」" title="ストリートビューをカンタンに表示させられる「stview.js」" width="514" height="204" class="alignleft size-full wp-image-12261" /></p><p>Google マップのページから、ストリートビューの埋込みタグを取得するという手段もありますが、もっとシンプルに埋め込みたいと感じることもありますよね。</p><p>今回は、Google Maps API key の取得も不要で、住所やランドマーク名などをカンタンなタグで表記するだけでストリートビューを表示できる Javascript ライブラリをご紹介します。</p><!--more--><h3 class='header-label'>ストリートビューをカンタンに表示させられる「stview.js」</h3><p>「<a class='web-site-link' href="http://togosoft.com/web/streetview/index.php" onclick="window.open('http://togosoft.com/web/streetview/index.php'); return false;">stview.js</a>」は、<strong>住所やランドマーク名、緯度・経度を指定するだけで、カンタンにストリートビューをブログやサイトへ表示させられる Javascript ライブラリ。</strong></p><p>日本語で海外のランドマークを指定することもでき、繰り返しストリートビューを表示するようなサイトでの効率化も期待できます。</p><h4 class='tips'>東京スカイツリー</h4><div class="$stview" width="522" height="300">東京スカイツリー</div><p>↑今日（2010年1月10日現在）は、まだ建設中のスカイツリーが写っていませんが、【ユーザーの写真】で見ることができます。</p><p>このストリートビューは、以下のようなコードで表示させています。</p>
<pre>&lt;div class="$stview" width="522" height="300"&gt;&#26481;&#20140;&#12473;&#12459;&#12452;&#12484;&#12522;&#12540;&lt;/div&gt;<br />&lt;script&gt;
$stview.parse();
&lt;/script&gt;</pre>
<p>Scriptの部分は、１ページに一箇所だけ、最後のストリートビューの後ろに記述してください。（複数記述すると表示されなくなります。）</p>
<h4 class='tips'>旭山動物園</h4>
<div class="$stview" width="522" height="300">旭川市旭山動物園</div>
<p>↑旭山動物園や、高台寺、<a href="http://web-marketing.zako.org/google/disneyland-paris-in-street-view.html">ディズニーランド パリ</a>など、パートナープログラムを利用している施設も名称で表示させることができます。</p>
<pre>&lt;div class="$stview" width="522" height="300"&gt;&#26093;&#24029;&#24066;&#26093;&#23665;&#21205;&#29289;&#22290;&lt;/div&gt;<br />&lt;script&gt;
$stview.parse();
&lt;/script&gt;</pre>
<h4 class='tips'>タイムズスクエア</h4><div class="$stview" width="522" height="300">タイムズスクエア</div><p>↑こちらはタイムズスクエアを日本語で指定して表示させたもの。すべての建物が日本語で指定できるわけではないようですが（六本木ヒルズは表示されず。）これは便利ですよね。</p>
<pre>&lt;div class="$stview" width="522" height="300"&gt;&#12479;&#12452;&#12512;&#12474;&#12473;&#12463;&#12456;&#12450;&lt;/div&gt;<br />&lt;script&gt;
$stview.parse();
&lt;/script&gt;</pre>
<h4 class='tips'>東京都豊島区東池袋１-１-１</h4>
<div class="$stview" width="522" height="300">東京都豊島区東池袋１-１-１</div>
<p>↑住所での指定も可能。</p>
<pre>&lt;div class="$stview" width="512" height="300"&gt;&#26481;&#20140;&#37117;&#35914;&#23798;&#21306;&#26481;&#27744;&#34955;&#65297;-&#65297;-&#65297;&lt;/div&gt;<br />&lt;script&gt;
$stview.parse();
&lt;/script&gt;</pre>
<script>
$stview.parse();
</script>
<h3 class='header-label'>stview.js の利用方法</h3><ol class="steps"><li><h4>stview.js ファイルの取得</h4><p><a class='web-site-link' href="http://togosoft.com/web/streetview/index.php" onclick="window.open('http://togosoft.com/web/streetview/index.php'); return false;">ToGo Software Street View Library</a>のページから<a class='web-site-link' href="http://togosoft.com/web/streetview/stview.js" onclick="window.open('http://togosoft.com/web/streetview/stview.js'); return false;">stview.js</a>をダウンロードして、任意のディレクトリへアップロードします。</p></li>
<li><h4>head 内にコードを記述</h4><p>&lt;head&gt; から &lt;/head&gt; の間に、下記コードを記述します。</p><p>&lt;script src="JSファイルをアップしたディレクトリ/stview.js"&gt;&lt;/script&gt;</p></li><li><h4>ストリートビュー表示タグの記述</h4><p>ストリートビューを表示させたい部分に、下記のようなコードを記述</p><p>&lt;div class="$stview" width="&#9632;&#24133;&#12434;&#25351;&#23450;&#9632;" height="&#9632;&#39640;&#12373;&#12434;&#25351;&#23450;&#9632;"&gt;&#9632;&#20303;&#25152;&#12394;&#12393;&#9632;&lt;/div&gt;</p><p>■に囲まれた部分を任意のものに変更してください。</p></li>
<li><h4>ストリートビューの後ろにコードを記述</h4><p>ストリートビューを表示させるコードの後ろに、下記コードを記述します。ストリートビューを複数表示させる場合は、最後のストリートビューの後ろに一回だけ記述してください。</p><p>&lt;script&gt;<br />$stview.parse();<br />&lt;/script&gt;</p></li></ol>
<p>Googleマップから埋込みタグを取得した際には表示させられない、【ユーザーの写真】を表示できるのも良いですね。また、埋め込んだ数の割に、読込みが軽く感じられるのも利点となりそうです。</p><p>Via：<a class='web-site-link' href="http://googlemapsmania.blogspot.com/2010/01/street-view-javascript-library.html" onclick="window.open('http://googlemapsmania.blogspot.com/2010/01/street-view-javascript-library.html'); return false;">Google Maps Mania</a></p>