左のマップ上をクリックします | この Maps API のソース | Home
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Street View</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=YOUR-API-KEY" type="text/javascript">
</script>
<script type="text/javascript">
var map;
var myPano;
var panoClient;
var currentLatLng = new GLatLng(35.659461, 139.700512);
var currentYaw = 135;
var fovMarker;
var iconSize = 150;
function initialize(chosen) {
panoClient = new GStreetviewClient();
map = new GMap2(document.getElementById("map"),{draggableCursor:"crosshair"});
map.addControl(new GLargeMapControl());
map.addControl(new GMenuMapTypeControl(true, false));
map.setCenter(currentLatLng, 14);
myPano = new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(currentLatLng, {yaw:currentYaw, pitch:5});
fovMarker = new GMarker(currentLatLng, {clickable: false});
GEvent.addListener(map,"click", function(overlay,point) {
currentLatLng=point;
myPano.setLocationAndPOV(currentLatLng);
map.setCenter(currentLatLng);
map.removeOverlay(fovMarker);
fovMarker = new GMarker(map.getCenter(), {clickable: false});
map.addOverlay(fovMarker);
return;
});
GEvent.addListener(myPano, "initialized", handleInitialized);
GEvent.addListener(myPano, "yawchanged", handleYawChange);
svOverlay = new GStreetviewOverlay(); // 消しても可
map.addOverlay(svOverlay); // 消しても可
return;
}
function handleInitialized(location) {
map.setCenter(location.latlng);
currentLatLng=location.latlng;
placeFovMarker();
return;
}
function handleYawChange(yaw) {
currentYaw = Math.round(yaw);
placeFovMarker();
return;
}
function placeFovMarker(){
map.removeOverlay(fovMarker);
fovMarker = new GMarker(currentLatLng, {clickable: false});
map.addOverlay(fovMarker);
return;
}
function new_center(lat, lng) {
var point = new GLatLng(lat, lng);
currentLatLng=point;
myPano.setLocationAndPOV(currentLatLng);
map.setCenter(currentLatLng);
map.removeOverlay(fovMarker);
fovMarker = new GMarker(map.getCenter(), {clickable: false});
map.addOverlay(fovMarker);
return;
}
</script>
</head>
<body onLoad="initialize()" onUnload="GUnload()">
<div id="map" style="width: 200px; height: 320px; border: 1px solid #000; float: left;">Loading...</div>
<div id="pano" style="width: 450px; height: 320px; border: 1px solid #000; margin-left: 204px;"></div>
</body>
</html>