場所の設定

ストリートビューを表示する場所はコンストラクタで指定する以外にメソッドを使って設定することができます。

場所を設定するにはGStreetviewPanoramaクラスで定義されているsetLocationAndPOVメソッドを使います。

setLocationAndPOV(latlng:GLatLng, opt_pov:GPov)

Flash ビューアの場所と POV を設定します。この関数を呼び出すと、ビューア
は latlng が指定されている場合はそれに最も近い場所を表示します。この場所
のデータが指定されていない場合は、Flash Player は変化せず、エラーコード
を送信します。

1番目の引数には場所を表すGLatLngクラスのオブジェクトを指定します。2番目の引数にはカメラ視点を表すGPovクラスのオブジェクトリテラルを指定します。

メソッドが実行されると1番目の引数に指定した座標に対し、ストリートビューのデータが存在する最寄の座標を調べ、ストリートビューの位置を設定します。ただしあまり近くにデータが無い場合にはエラーとなる場合もあります。

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

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

var scontainer = document.getElementById("street");
var panorama = new GStreetviewPanorama(scontainer);

var slatlng = new GLatLng(35.658517, 139.745493);
panorama.setLocationAndPOV(spoint);

上記ではストリートビューの初期値として場所を設定していますが、後から場所を変更する場合にも利用できます。

サンプルプログラム

では試してみます。

code4_1.js

var map;
var panorama;

function initialize() {
  if (GBrowserIsCompatible()) {
    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");
    panorama = new GStreetviewPanorama(scontainer, option);

    GEvent.addListener(map, "click", moveCenter);
  }
}

function moveCenter(overlay, latlng){
  map.panTo(latlng);
  panorama.setLocationAndPOV(latlng);
}

map4_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/code4_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を見てみます。

p4-1

地図上の任意の地点をクリックすると、クリックした地点に地図が移動すると同時にストリートビューで表示する場所もその地点に変更になります。

p4-2

p4-3

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

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