Google Street View を表示するサンプル

Google Map API を利用してGoogle Street Viewを表示するサンプルです。必要な作業は以下のとおり。

Google Map のJavaScriptライブラリをインポート
1. Google MapのAPIキーを取得して、keyの値に設定する必要があります。
Street Viewを表示するコンテナ要素を作成。
1. 幅と高さも設定しておきます。
GStreetviewPanoramaを作成。
1. 引数で2で作成したコンテナ要素と表示する緯度経度を指定します。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- google mapのライブラリをインポート -->
  <script src="http://maps.google.com/maps?file=api&v=2&key=<APIキー>&sensor=false" type="text/javascript"></script>
  <script type="text/javascript">
    function onLoad() {
      // 引数でコンテナ要素を指定してGStreetviewPanoramaインスタンスを作成
      var panorama = new GStreetviewPanorama(document.getElementById("streetView"), {
        latlng: new GLatLng(35.72294593742252, 139.4572949409485)
      });
    }
  </script>
</head>
<body onload="onLoad();">
  <!-- ストリートビューを貼り付けるコンテナ要素を用意 -->
  <div id="streetView" style="width:400px;height:200px;" ></div>
</body>
</html>

実行結果はこちら

表示する方向と角度を指定する

緯度経度と同じく、コンストラクタのオプションとして指定できます。また、APIで後から設定することも可能です。以下は指定された位置の全方位のビューをパノラマ風に表示してみた例です。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- google mapのライブラリをインポート -->
  <script src="http://maps.google.com/maps?file=api&v=2&key=<APIキー>&sensor=false" type="text/javascript"></script>
  <script type="text/javascript">
    function onLoad() {
      // 方角
      // 0=北を基点とする角度(時計回り)。90=東,180=南,270=西
      var yaws = [0,90,180,270]; 
      // 表示する角度。 0が水平で、真上は-90,真下は90
      var pitches = [-60,0,60];
      // 全方位と角度,0,60,-60を一括表示する例
      for ( var i=0;i<yaws.length;i++ ) {
        for ( var j=0;j<pitches.length;j++ ) {
          new GStreetviewPanorama(document.getElementById( pitches[j] + "_" + yaws[i]), {
            latlng: new GLatLng(35.65936005992435, 139.70079123973846),
            pov : {yaw:yaws[i], pitch:pitches[j]}
          });
        }
      }
    }
  </script>
  <style type="text/css">
    div.row { width:1200px; }
    div.cell { 
      width: 300px; 
      heigth: 200px;
      float: left;
    }
  </style>
</head>
<body onload="onLoad();">
  <div class="row">
    <div id="-60_0"  class="cell"></div>
    <div id="-60_90"  class="cell"></div>
    <div id="-60_180"  class="cell"></div>
    <div id="-60_270"  class="cell"></div>
  </div>
  <div class="row">
    <div id="0_0"  class="cell"></div>
    <div id="0_90"  class="cell"></div>
    <div id="0_180"  class="cell"></div>
    <div id="0_270"  class="cell"></div>
  </div>
  <div class="row">
    <div id="60_0"  class="cell"></div>
    <div id="60_90"  class="cell"></div>
    <div id="60_180"  class="cell"></div>
    <div id="60_270"  class="cell"></div>
  </div>
</body>
</html>

実行結果はこちら。そこそこ重いのでご注意。