Google ストリートビューを使ってみた。
Google ストリートビューを使ってみました。
こんな感じ。
http://moeten.info/maidcafe/?&m=s&id=23&d=access
サンプルをちょっと修正しただけです。
重要な部分(意外と短い)
//緯度経度 var fenwayPark = new GLatLng(35.70131774611977,139.77496773004532); //カメラ角度 var fenwayPOV = {yaw:370.64659986187695,pitch:-20}; //クラス作成 panoClient = new GStreetviewClient(); //html内のdivにFlashを挿入 myPano = new GStreetviewPanorama(document.getElementById("pano")); //実際の表示 myPano.setLocationAndPOV(fenwayPark, fenwayPOV); GEvent.addListener(myPano, "error", handleNoFlash); panoClient.getNearestPanorama(fenwayPark, showPanoData);
リンク
ソースはこちら
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example: Street View Data Example</title> <script src="http://maps.google.com/maps?file=api&v=2.x&key=APIキー" type="text/javascript"></script> <script type="text/javascript"> var map; var myPano; var panoClient; function initialize() { var fenwayPark = new GLatLng(35.70131774611977,139.77496773004532); var fenwayPOV = {yaw:370.64659986187695,pitch:-20}; panoClient = new GStreetviewClient(); myPano = new GStreetviewPanorama(document.getElementById("pano")); myPano.setLocationAndPOV(fenwayPark, fenwayPOV); GEvent.addListener(myPano, "error", handleNoFlash); panoClient.getNearestPanorama(fenwayPark, showPanoData); } function showPanoData(panoData) { if (panoData.code != 200) { return; } myPano.setLocationAndPOV(panoData.location.latlng); } function handleNoFlash(errorCode) { if (errorCode == 603) { alert("Error: Flash doesn't appear to be supported by your browser"); return; } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div name="pano" id="pano" style="width: 500px; height: 400px"></div> </body> </html>