昨日に引き続き。画面上をグリグリするのも面倒くさいので。
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Seis Pesos: ストリートビューその３</title>
<style type="text/css">
body {
font-family: "Arial", osaka, sans-serif;
font-size: 13px;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>
<script type="text/javascript">
google.load("maps", "2.x");
var map;
var myPano;
var panoClient;
var myPOV = null;
var currentYaw = 0;
var currentPitch = 0;
var timer;
var marker;
function initialize() { panoClient = new GStreetviewClient();
var latlng = new GLatLng(35.660092, 139.70072);
map = new GMap2(document.getElementById("map"), {draggableCursor: 'crosshair'});
map.setCenter(latlng, 15);
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GHierarchicalMapTypeControl());
map.addControl(new GSmallMapControl());
myPano = new GStreetviewPanorama(document.getElementById("streetview"));
myPano.setLocationAndPOV(latlng, {yaw: 0, pitch: 0});
GEvent.addListener(map, "click", function(overlay,latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
});
GEvent.addListener(myPano, "initialized", move);
GEvent.addListener(myPano, "yawchanged", onYawChange);
panoClient.getNearestPanorama(latlng, showPanoData);
// svOverlay = new GStreetviewOverlay();
// map.addOverlay(svOverlay);
}
function showPanoData(panoData) {
if (panoData.code == 600) {
alert('ストリートビュー未対応地域です');
} else {
var html = "<p><strong>"+panoData.location.description+"<\/strong><br/>"+panoData.location.latlng+"<\/p>";
map.setCenter(panoData.location.latlng);
map.openInfoWindowHtml(panoData.location.latlng, html);
myPano.setLocationAndPOV(panoData.location.latlng, myPOV);
}
}
function move(panoData) {
var html = "<p><strong>"+panoData.description+"<\/strong><br/>"+panoData.latlng+"<\/p>";
map.setCenter(panoData.latlng);
map.openInfoWindowHtml(panoData.latlng, html);
poslat = String(panoData.lat);
poslng = String(panoData.lng);
}
function onYawChange(newYaw) {
if (newYaw < 0) {
newYaw += 360;
}
var pov = myPano.getPOV();
yawangle = pov.yaw.toFixed(0);
pitchangle = pov.pitch.toFixed(0);
zoomvalue = pov.zoom;
}
function animate0() { myPano.followLink(0);}
function animatestart0() {
clearInterval(timer);
timer = window.setInterval(animate0, 2000);
}
function animate180() {
myPano.followLink(180);
}
function animatestart180() {
clearInterval(timer);
timer = window.setInterval(animate180, 2000);
}
function rotate() {
currentYaw += 2;
myPano.panTo({yaw:currentYaw, pitch:currentPitch});
}
function rotatestart() {
clearInterval(timer);
timer = window.setInterval(rotate, 200);
}
function animatestop() {
clearInterval(timer);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<form action=""><p>
<input type="button" value="すすむ" onclick="animatestart0()" title="すすむ" />
<input type="button" value="ストップ" onclick="animatestop()" title="ストップ" />
<input type="button" value="もどる" onclick="animatestart180()" title="もどる" />
<input type="button" value="ぐるりとまわる" onclick="rotatestart()" title="ぐるりとまわる" />
</p></form>
<div id="container_streetview">
<div id="streetview" style="width:480px; height:240px; border: 1px solid black; margin-bottom: 4px;"></div>
</div>
<div id="map" style="width:480px; height:240px; border: 1px solid black;"></div>
</body>
</html>
Glotter.com を参考にさせていただきました。※補足