読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

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

JavaScript Google Map

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

  1. Google Map のJavaScriptライブラリをインポート
    1. Google MapのAPIキーを取得して、keyの値に設定する必要があります。
  2. Street Viewを表示するコンテナ要素を作成。
    1. 幅と高さも設定しておきます。
  3. 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>

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