例−25：Googleマップ・ストリート・ビューを実装する(GStreetviewPanorama)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>例−25：Googleマップ・ストリート・ビューを実装する(GStreetviewPanorama)</title>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[MAPS_API_KEY]"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var svObj=null;
var svContainer,marker, infoWnd;
function load(){
//===============================//
// 地図の初期化 //
//===============================//
//コンテナの取得
var container = document.getElementById("map");
//地図の作成
var map = new GMap2(container);
//地図の表示
var point=new GLatLng(35.658587, 139.745425);
map.setCenter(point, 17);
//マップコントローラを付ける
map.addControl(new GLargeMapControl());
//===============================//
// ストリートビューの初期化 //
//===============================//
//ストリートビュー用のコンテナ
svContainer = document.createElement("div");
svContainer.style.width="300px";
svContainer.style.height="300px";
//GStreetviewOverlayの追加
map.addOverlay(new GStreetviewOverlay());
//===============================//
// マーカーの初期化 //
//===============================//
//マーカーを作成
marker = new GMarker(point,{draggable: true});
//マーカーをクリックしたら、ふきだしを表示する
GEvent.addListener(marker, "click", showStreetView);
//マーカーがドラッグを開始したら、ふきだしを閉じる
GEvent.addListener(marker, "dragstart", function(){
map.closeInfoWindow();
if(!svObj && svObj!=undefined){
//GStreetViewPanoramaの削除
//(メモリ開放)
svObj.remove();
}
});
//マーカーのドラッグが終了したら、マーカーを擬似クリック
GEvent.addListener(marker, "dragend", function(){
GEvent.trigger(marker, "click");
});
//マーカーの追加
map.addOverlay(marker);
//===============================//
// 初期位置の表示 //
//===============================//
//マーカーのふきだしを開く
marker.openInfoWindowHtml("<b>青い線の上にドラッグ＆ドロップしてください</b>");
}
function showStreetView(){
//===============================//
// ストリートビューの表示 //
//===============================//
//マーカーの現在位置を取得
var markerPos = marker.getPoint();
//GStreetviewPanoramaの作成
svObj = new GStreetviewPanorama(svContainer,{latlng:markerPos});
//ふきだしの表示
marker.openInfoWindow(svContainer);
}
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>
</head>
<body >
<h1>例−25：Googleマップ・ストリート・ビューを実装する(GStreetviewPanorama)</h1>
<div id="map" style="width:600px;height:600px;">
</body>
</html>
