ストリートビューの表示

ではストリートビューを表示してみます。

ストリートビューは別途用意したコンテナ内に表示します。今回は地図を表す時と同じくXHTMLファイル内に任意のdiv要素を使ってストリートビューの表示領域を確保します

<div id="street" style="width:400px; height:300px"></div>

領域は任意の大きさで利用できますが、少なくとも200ピクセル×200ピクセル必要です。

次にストリートビューを表すGStreetviewPanoramaクラスのオブジェクトを作成します。コンストラクタ関数は次のように定義されています。

GStreetviewPanorama(container:Node, opts?:GStreetviewPanoramaOptions)

対応する Flash ビューアを含む新しい GStreetviewPanorama オブジェクトを指
定されたコンテナ内に作成します。オプションの GStreetviewPanoramaOptions 
の opts オブジェクトで場所が指定されるか、setLocationAndPOV を呼び出すこ
とにより場所が指定されるまで、ビューアは表示されません。

1番目の引数にはストリートビューを表示するコンテナを指定します。

2番目の引数にはGStreetviewPanoramaOptionsクラスのオブジェクトを指定します。このクラスはコンストラクタ関数が用意されていませんのでオブジェクトリテラルを作成します。

var opts = {プロパティ名:値, プロパティ名:値, ...};

GStreetviewPanoramaOptionsクラスで定義されているプロパティは2つでlatlngプロパティとpovプロパティです。今回はストリートビューを表示する場所を示すlatlngプロパティに値を指定します。値は座標を表すGLatLngクラスのオブジェクトで指定して下さい。

latlngプロパティ

Flash ビューアを開く latlng。 

値：
  GLatLng

実際には次のように記述します。

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.172304,136.908306), 15);

var slatlng = new GLatLng(35.658517, 139.745493);
var option = { latlng:slatlng };
var scontainer = document.getElementById("street");
var panorama = new GStreetviewPanorama(scontainer, option);

GStreetviewPanoramaクラスのオブジェクトを作成した時点で、引数に指定したコンテナ内にストリートビューが表示されます。なおストリートビューが表示されるためには表示しているブラウザがFlashを表示できなければなりません。

サンプルプログラム

では試してみます。

code2_1.js

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.659683,139.742956), 16);

    var street = new GStreetviewOverlay();
    map.addOverlay(street);

    var slatlng = new GLatLng(35.659683,139.742956);
    var option = { latlng:slatlng };
    var scontainer = document.getElementById("street");
    var panorama = new GStreetviewPanorama(scontainer, option);
  }
}

map2_1.html

<!DOCTYPE html "-//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">
  <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&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code2_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 300px"></div>
    <div id="street" style="width: 400px; height: 200px; margin-top:10px;"></div>
  </body>
</html>

ではブラウザで上記のURLを見てみます。

p2-1

ストリートビューが指定したコンテナ内に表示されます。

ストリートビューは、ビュー内で回転させたり上や下を向いたり道路に沿って移動することができます。

p2-2

p2-3

p2-4

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。