« チリ国内向けと日本向け輸出品の相違 Google Maps API ストリートビュー（改） »
Street View 日本のストリートビュー
Agosto 5, 2008
Category:Google
Google Maps 、日本では米国ほどプライバシー論争は起こらないだろうけれど、丸見えです。
人形アイコンをクリックすると InfoWindow が開き、さらに 
をクリックすれば最大化されます。
Google Maps API ストリートビュー（その１）（新しいウィンドウで開く）
<!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>Streetview API</title>
<script type="text/javascript" src="http://www.google.com/maps?file=api&v=2&key=YOUR-KEY"></script>
<script type="text/javascript">
var marker;
var overlayInstance = null;
var map;
var client;
var lastMarkerLocation;
var panorama;
var mapT;
function load() {
client = new GStreetviewClient();
var latlng = new GLatLng(35.658725, 139.746222);
map = new GMap2(document.getElementById("map"));
map.setCenter(latlng, 15);
map.addControl(new GSmallMapControl());
var guyIcon = new GIcon(G_DEFAULT_ICON);
guyIcon.image = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";
guyIcon.transparent = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";
guyIcon.imageMap = [
26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
16,20, 16,14, 19,13, 22,8
];
guyIcon.iconSize = new GSize(49, 52);
guyIcon.iconAnchor = new GPoint(25, 35);
guyIcon.infoWindowAnchor = new GPoint(25, 5);
marker = new GMarker(latlng, {icon: guyIcon, draggable: true});
map.addOverlay(marker);
lastMarkerLocation = latlng;
GEvent.addListener(marker, "dragend", onDragEnd);
GEvent.addListener(marker, "click", openPanoramaBubble);
toggleOverlay();
}
function openPanoramaBubble() {
var contentNode = document.createElement('div');
contentNode.style.textAlign = 'center';
contentNode.style.width = '500px';
contentNode.style.height = '300px';
contentNode.innerHTML = 'Loading panorama';
marker.openInfoWindow("<div id='pano' style='width:240px;height:200px;'><\/div>", {maxContent: contentNode, maxTitle: "Full screen"});
panorama = new GStreetviewPanorama(document.getElementById("pano"));
panorama.setLocationAndPOV(marker.getLatLng(), null);
GEvent.addListener(panorama, "newpano", onNewLocation);
GEvent.addListener(panorama, "yawchanged", onYawChange);
var iw = map.getInfoWindow();
GEvent.addListener(iw, "maximizeend", function() {
panorama.setContainer(contentNode);
window.setTimeout("panorama.checkResize()", 5);
});
}
function toggleOverlay() {
if (!overlayInstance) {
overlayInstance = new GStreetviewOverlay();
map.addOverlay(overlayInstance);
} else {
map.removeOverlay(overlayInstance);
overlayInstance = null;
}
}
function onYawChange(newYaw) {
var GUY_NUM_ICONS = 16;
var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
if (newYaw < 0) {
newYaw += 360;
}
guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) % GUY_NUM_ICONS;
guyImageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + guyImageNum + ".png";
marker.setImage(guyImageUrl);
}
function onNewLocation(lat, lng) {
var latlng = new GLatLng(lat, lng);
marker.setLatLng(latlng);
}
function onDragEnd() {
var latlng = marker.getLatLng();
if (panorama) {
client.getNearestPanorama(latlng, onResponse);
}
}
function onResponse(response) {
if (response.code != 200) {
marker.setLatLng(lastMarkerLocation);
} else {
var latlng = new GLatLng(response.Location.lat, response.Location.lng);
marker.setLatLng(latlng);
lastMarkerLocation = latlng;
openPanoramaBubble();
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 550px; height: 380px; border: 1px solid black;"></div>
<form action=""><p> <input type="button" onclick="toggleOverlay()" value="Toggle"/></p></form>
</body>
</html>
ついでにこんなのも API で作れます。・・・Street View はフラッシュだから、Maps API for Flash にこの機能が追加されたら、当然レスポンスもいいと思います。
カテゴリ＝Google
コメント
※Sign in または Sign up しなくてもコメントできます
Street View 日本のストリートビュー
Google Maps 、日本では米国ほどプライバシー論争は起こらないだろうけれど、丸見えです。
人形アイコンをクリックすると InfoWindow が開き、さらに をクリックすれば最大化されます。
Google Maps API ストリートビュー（その１）（新しいウィンドウで開く）
<!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>Streetview API</title>
<script type="text/javascript" src="http://www.google.com/maps?file=api&v=2&key=YOUR-KEY"></script>
<script type="text/javascript">
var marker;
var overlayInstance = null;
var map;
var client;
var lastMarkerLocation;
var panorama;
var mapT;
function load() {
client = new GStreetviewClient();
var latlng = new GLatLng(35.658725, 139.746222);
map = new GMap2(document.getElementById("map"));
map.setCenter(latlng, 15);
map.addControl(new GSmallMapControl());
var guyIcon = new GIcon(G_DEFAULT_ICON);
guyIcon.image = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";
guyIcon.transparent = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";
guyIcon.imageMap = [
26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
16,20, 16,14, 19,13, 22,8
];
guyIcon.iconSize = new GSize(49, 52);
guyIcon.iconAnchor = new GPoint(25, 35);
guyIcon.infoWindowAnchor = new GPoint(25, 5);
marker = new GMarker(latlng, {icon: guyIcon, draggable: true});
map.addOverlay(marker);
lastMarkerLocation = latlng;
GEvent.addListener(marker, "dragend", onDragEnd);
GEvent.addListener(marker, "click", openPanoramaBubble);
toggleOverlay();
}
function openPanoramaBubble() {
var contentNode = document.createElement('div');
contentNode.style.textAlign = 'center';
contentNode.style.width = '500px';
contentNode.style.height = '300px';
contentNode.innerHTML = 'Loading panorama';
marker.openInfoWindow("<div id='pano' style='width:240px;height:200px;'><\/div>", {maxContent: contentNode, maxTitle: "Full screen"});
panorama = new GStreetviewPanorama(document.getElementById("pano"));
panorama.setLocationAndPOV(marker.getLatLng(), null);
GEvent.addListener(panorama, "newpano", onNewLocation);
GEvent.addListener(panorama, "yawchanged", onYawChange);
var iw = map.getInfoWindow();
GEvent.addListener(iw, "maximizeend", function() {
panorama.setContainer(contentNode);
window.setTimeout("panorama.checkResize()", 5);
});
}
function toggleOverlay() {
if (!overlayInstance) {
overlayInstance = new GStreetviewOverlay();
map.addOverlay(overlayInstance);
} else {
map.removeOverlay(overlayInstance);
overlayInstance = null;
}
}
function onYawChange(newYaw) {
var GUY_NUM_ICONS = 16;
var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
if (newYaw < 0) {
newYaw += 360;
}
guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) % GUY_NUM_ICONS;
guyImageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + guyImageNum + ".png";
marker.setImage(guyImageUrl);
}
function onNewLocation(lat, lng) {
var latlng = new GLatLng(lat, lng);
marker.setLatLng(latlng);
}
function onDragEnd() {
var latlng = marker.getLatLng();
if (panorama) {
client.getNearestPanorama(latlng, onResponse);
}
}
function onResponse(response) {
if (response.code != 200) {
marker.setLatLng(lastMarkerLocation);
} else {
var latlng = new GLatLng(response.Location.lat, response.Location.lng);
marker.setLatLng(latlng);
lastMarkerLocation = latlng;
openPanoramaBubble();
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 550px; height: 380px; border: 1px solid black;"></div>
<form action=""><p> <input type="button" onclick="toggleOverlay()" value="Toggle"/></p></form>
</body>
</html>
ついでにこんなのも API で作れます。・・・Street View はフラッシュだから、Maps API for Flash にこの機能が追加されたら、当然レスポンスもいいと思います。
ストリートビューとそっくりのサービスです。
ロケーションビュー
http://www.locaview.com/
撮影エリアとかが違うので、こちらもお試しくださいね。
こんばんは＾＾
早速Seis Pesosさんの真似＾＾；をさせてもらいました。
いろいろできちゃうんですね。
むずかしいことは何もわかりませんが、勉強になります。
ストリートビューはスゴイですね。
近所がうつっているとドッキリします・・。
>> ロケーションブー さん、エドルネ さん
この種のサービスはおもしろいですよね。
将来、場所によっては、ライブカメラが設置され生映像が入ったりする可能性もあるでしょうね。
ただ、有名人の自宅が暴かれたりとか、悪用の惧れもまたあるでしょうね。