GoogleMapのストリートヴューのコントローラーは公開されてないのかしら

325 views
Skip to first unread message

YON

unread,
Nov 17, 2009, 7:36:27 AM11/17/09
to Google-Maps-API-Japan
久しぶりに投稿します。
Googleマップ
http://maps.google.co.jp/
にあるストリートヴューの人型のコントローラーはAPIで提供されているのでしょうか?
いろいろ探したけど、見つからなかったので、Gcontrolとか使ってとりあえず
作ってみたけど今ひとつです。

-出来なかったけど、できそうな事
・.コントロールから人型をそのまま、ビューを見たい場所にドラッグして
場所を確定
・.ビューが無い地図の時は人型を白色にする。

-超難しそうな事
・人型移動時の緑色の丸い影のコントロール
・視点方向の変更と合わせて、人型の向きと緑色影の方向を変える

人型のアイコンの入手先は、
http://maps.gstatic.com/intl/en_ALL/mapfiles/cb/mod_cb_scout/cb_scout_sprite_003.png
ここから勝手に持ってきて
function sprite(x,y){
var icon = new GIcon(G_DEFAULT_ICON);
icon.sprite = {};
icon.sprite.image = "cb_scout_sprite_003.png";
icon.sprite.top = y;
  icon.sprite.left = x;
return icon;
}
でセットできるとここの英語のページに投稿されていたけど、うまく
出来なかったので、手っ取り早くペイントショップで切り取った。
勝手に使っていいのかしらん。商用利用じゃないから許してGoogleさん

結局作った人型アイコンをマーカーにして、イベントをごちゃごちゃ付けて
アイコンが変わるように作ったけど、きれいにコーディングできなかった。

今日これ作っていたら、GoogleMapが表示されなくなった。世界中で
そうなったみたい。私のせいだったりして...笑、笑

こんなのです。
http://yoneyone.my-sv.net/GstviewTest.htm
(ソース)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Google Street View (Test)</title>
<style type="text/css"></style>
<script type="text/javascript" charset="UTF-8" src="http://
maps.google.com/maps?
file=api&v=2&key=ABQIAAAAG93o66s6C1e8nCJDkjmJ0xSVVYxLupw9AvipHbcBrNMoQN8XSBRA6NK6XyYISfT41Z7mY_whiu7HMg"></
script>
<script type="text/javascript" charset="utf-8">
<!--
var map=null;
var stview=null;
var viewclient=null;
var SV_icon=null;
var panorama=null;
var startpoint=null;
var geocoder = new GClientGeocoder();
var center_marker=null;

function StviewCtrl(){}
StviewCtrl.prototype = new GControl();
StviewCtrl.prototype.initialize = function(map){
var container = document.getElementById("StviewButton");
var btnDiv = document.getElementById("btn");
btn_mouseover_hnadle=GEvent.addDomListener(btnDiv, "mouseover",
function(){
btnDiv.setAttribute("src","/MAPICON/svicon1.png");
});
btn_mouseout_hnadle=GEvent.addDomListener(btnDiv, "mouseout", function
(){
btnDiv.setAttribute("src","/MAPICON/svicon.png");
});
GEvent.addDomListener(btnDiv, "click", function(){
if(!stview){
GEvent.removeListener(btn_mouseout_hnadle);
GEvent.removeListener(btn_mouseover_hnadle);
btnDiv.setAttribute("src","/MAPICON/svicon0.png");
document.getElementById("map").style.width="500px";
document.getElementById("stview").style.display="block";
map.checkResize();
stview= new GStreetviewOverlay();
viewclient = new GStreetviewClient();
panorama = new GStreetviewPanorama(document.getElementById
("stview"));
map.addOverlay(stview);
SV_icon = new GIcon();
SV_icon.image ="/MAPICON/svmarker.png";
SV_icon.iconSize = new GSize(22,46);
SV_icon.iconAnchor = new GPoint(11,46);
SV_icon.infoWindowAnchor = new GPoint(11,23);
var markeropts = {draggable:true,clickable:true,icon:SV_icon};
SV_marker = new GMarker(map.getCenter(),markeropts);
GEvent.addListener(SV_marker, "dragstart", function() {
startpoint=SV_marker.getLatLng();
SV_marker.closeInfoWindow();
});
GEvent.addListener(SV_marker, "drag", function() {
if (SV_marker.getLatLng().lng() > startpoint.lng()){
SV_marker.setImage("/MAPICON/svwalk0r.png");
}else{
SV_marker.setImage("/MAPICON/svwalk0.png");
}
});
GEvent.addListener(SV_marker, "dragend", function() {
SV_marker.setImage("/MAPICON/svmarker.png");
viewclient.getNearestPanoramaLatLng(SV_marker.getLatLng(),function
(point){
if(point){
panorama.setLocationAndPOV(point);
map.panTo(point);
}
});
});
GEvent.addListener(SV_marker, "click", function() {
var SV_marker_content = document.createElement("div");
SV_marker_content.setAttribute("id", "SV_marker");
var point = SV_marker.getLatLng();
geocoder.getLocations(point, function(addresses){
if(addresses.Status.code != 200){
SV_marker_content.innerHTML="クリックされた地点の住所を特定できませんでした。<br/
>lat:"+point.lat()+"<br/>lng:"+point.lng();
SV_marker.openInfoWindow(SV_marker_content);
}else{
var result = addresses.Placemark[0];
if(result.address.substring(0,2) == "日本"){
   result.address = result.address.substring(2);
}
SV_marker_content.innerHTML=result.address + "<br/>lat:" +
point.lat() + "<br/>lng:" + point.lng();
document.getElementById("inaddr").value=result.address;
SV_marker.openInfoWindow(SV_marker_content);
}
});
});
map.addOverlay(SV_marker);
panorama.setLocationAndPOV(map.getCenter());
map_move_hnadle=GEvent.addListener(map,"move",function(){
SV_marker.setPoint(map.getCenter());
viewclient.getNearestPanoramaLatLng(SV_marker.getLatLng(),function
(point){
if(point){
panorama.setLocationAndPOV(point);
}
});
});
map.removeOverlay(center_marker);
}else{
GEvent.removeListener(map_move_hnadle);
map.removeOverlay(SV_marker);
SV_icon = null;
map.removeOverlay(stview);
stview = null;
viewclient = null;
panorama = null;
document.getElementById("stview").style.display="none";
document.getElementById("map").style.width="800px";
map.checkResize();
btn_mouseover_hnadle=GEvent.addDomListener(btnDiv, "mouseover",
function(){
btnDiv.setAttribute("src","/MAPICON/svicon1.png");
});
btn_mouseout_hnadle=GEvent.addDomListener(btnDiv, "mouseout",
function(){
btnDiv.setAttribute("src","/MAPICON/svicon.png");
});
btnDiv.setAttribute("src","/MAPICON/svicon.png");
map.addOverlay(center_marker);
center_marker.setPoint(map.getCenter());
}
});
map.getContainer().appendChild(container);
return container;
}
StviewCtrl.prototype.getDefaultPosition = function(){
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(210, 2));
}

function Mapload() {
map = new GMap2(document.getElementById("map"),{size:new GSize
(800,400)});
map.setCenter(new GLatLng(35.655, 139.744),18);
map.addControl(new GMapTypeControl());
// map.setMapType(G_HYBRID_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl(),new GControlPosition
(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,15)));
map.addControl(new StviewCtrl());
new GKeyboardHandler(map);
/* add Center Marker */
var center_marker_icon = new GIcon();
center_marker_icon.image = "./MAPICON/center_cursor.png";
center_marker_icon.iconSize = new GSize( 33 , 33 );
center_marker_icon.iconAnchor = new GPoint( 16 , 16 );
center_marker = new GMarker(map.getCenter(),{
icon:center_marker_icon,clickable:false}
);
map.addOverlay(center_marker);
GEvent.addListener(map, "move", function(){
center_marker.setPoint(map.getCenter());
});
center_marker.setPoint(map.getCenter());
}
function Getgeo(){
var in_addr=document.getElementById("inaddr").value;
if(in_addr!=""){
geocoder.getLatLng(in_addr,function(point){
if(point){
map.panTo(point);
}else{alert("入力された住所が検索できませんでした");}
});
}else{alert("住所が入力されていません");}
}
// -->
</script>
</head>
<body onload="Mapload()" onunload="GUnload()">
<h2>Google Street Viewer</h2>
<div>
<p>住所:<input type="text" id="inaddr" size="80"><input type="button"
value="入力された住所へ移動" onclick="Getgeo();"></p>
</div>
<div style="position:relative; width:810px; height:410px;">
<div id="map" style="position:absolute;top:0px;left:0px;width:
800px;height:400px;border:1px solid black;"></div>
<div id="stview" style="position:absolute;top:0px;left:505px;width:
300px;height:400px;border:1px solid black;display:none;"></div>
</div>
<div id="StviewButton">
<img id="btn" src="/MAPICON/svicon.png" />
</div>
</body>
</html>

Masashi.K

unread,
Nov 17, 2009, 8:07:21 AM11/17/09
to Google-Maps-API-Japan
YONさん

お久しぶりです。

StreetView用のコントロールはAPIではないです。
自作するしかありませんが、私が作ったものでよければありますよ。

■ExtStreetViewControl - サンプル
http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extstreetviewcontrol/examples/basic.html

自分で言うのもなんですが、超お勧めです!
GOverviewMapControlみたいにストリートビューを縮めたり広げたりすることができます。
ストリートビューと地図をスワップする機能もあるので、結構使いやすいです(たぶん)。
Apache2ライセンスなので、改造して使っていただいても大丈夫です。
--------------

> -出来なかったけど、できそうな事
> ・.コントロールから人型をそのまま、ビューを見たい場所にドラッグして場所を確定
> ・.ビューが無い地図の時は人型を白色にする。

> -超難しそうな事
> ・人型移動時の緑色の丸い影のコントロール
> ・視点方向の変更と合わせて、人型の向きと緑色影の方向を変える

これはできそうですね。

spriteプロパティは、GMarkerのインスタンスを作成するときにしか使えないです。(たしか)
なのでマーカーにアイコンを当てて、あとからspriteプロパティの位置をずらすのはできなかったはず・・・。
(非公開機能なのによくご存知ですね・・・さすがYONさんですね)

私がよくつかう方法だと、そうゆう機能のマーカーを自作してしまいます。
extstreetviewcontrol.js の 内部で「PegmanMarker」というクラスを作っていますが
それがそうゆうことができますよ。

--------------

YONさんのソースコードを流し読みしたかぎりでは、もう少しでできそうだと思います。

ご参考になれば幸いです。

On 11月17日, 午後9:36, YON <yyr...@gmail.com> wrote:
> 久しぶりに投稿します。
> Googleマップhttp://maps.google.co.jp/
> にあるストリートヴューの人型のコントローラーはAPIで提供されているのでしょうか?
> いろいろ探したけど、見つからなかったので、Gcontrolとか使ってとりあえず
> 作ってみたけど今ひとつです。
>
> -出来なかったけど、できそうな事
> ・.コントロールから人型をそのまま、ビューを見たい場所にドラッグして
> 場所を確定
> ・.ビューが無い地図の時は人型を白色にする。
>
> -超難しそうな事
> ・人型移動時の緑色の丸い影のコントロール
> ・視点方向の変更と合わせて、人型の向きと緑色影の方向を変える
>
> 人型のアイコンの入手先は、http://maps.gstatic.com/intl/en_ALL/mapfiles/cb/mod_cb_scout/cb_scout...
> file=api&v=2&key=ABQIAAAAG93o66s6C1e8nCJDkjmJ0xSVVYxLupw9AvipHbcBrNMoQN8XSB RA6NK6XyYISfT41Z7mY_whiu7HMg"></

YON

unread,
Nov 17, 2009, 7:39:14 PM11/17/09
to Google-Maps-API-Japan
Masashi様、アドバイスありがとうございます。
「extstreetviewcontrol.js」を参考に勉強してみます。
簡便にカスタムコントロールを作るサンプルとして、
以前、貴殿のGoogleMaps活用講座で「GMapKit.Googleマップ 拡張ライブラリ」
の使用例が載っており、これを使わせてもらっていたのですが、いつのまにか×リンク
になり(ライブラリー自体はまだアクセス可能みたいですが)、将来「gmaps-utility-library-dev」
に移すと案内されていたので、使用例が見えず、試行錯誤になってしましました。
「GMapKit.Googleマップ 拡張ライブラリ」は廃止予定となっているので、ここに
直接リンクしてJavascriptを読みこんでいるページは、変更した方がよいのでしょうか?

Masashi.K

unread,
Nov 17, 2009, 7:46:26 PM11/17/09
to Google-Maps-API-Japan
GMapKit拡張ライブラリをご利用いただいてありがとうございます。
そうですね、ライブラリへのアクセスそのものはまだ可能ですが
今のところ廃止予定にしてあります。
gmaps-utility-library-devプロジェクトに参加するようになってから
同じものを2つ作るのも大変だったので、将来的には廃止の方向です。
(ライブラリは配布するかもしれません)

gmaps-utility-library-devは直接リンクしても問題ありませんが
ちょくちょく更新していたりするので、ときどきバグが出たりします。
なのでダウンロードしてYONさんのサイトに設置して使う方法をオススメします。

Masashi.K

unread,
Nov 17, 2009, 11:01:42 PM11/17/09
to Google-Maps-API-Japan
YONさん

ついでなので、昼休みにちょっと作ってみました。

■例-49:Google ストリートビューの視点とマーカーを同期する
http://googlemaps.googlermania.com/maps/map_example_49.html

W少年

unread,
Nov 20, 2009, 11:26:12 AM11/20/09
to Google-Maps-API-Japan
> StreetView用のコントロールはAPIではないです。
> 自作するしかありませんが、私が作ったものでよければありますよ。
>
> ■ExtStreetViewControl - サンプルhttp://gmaps-utility-library-dev.googlecode.com/svn/trunk/extstreetvi...
>
> 自分で言うのもなんですが、超お勧めです!
> GOverviewMapControlみたいにストリートビューを縮めたり広げたりすることができます。
> ストリートビューと地図をスワップする機能もあるので、結構使いやすいです(たぶん)。
> Apache2ライセンスなので、改造して使っていただいても大丈夫です。

横やり後免。
いいねぇ。まさにこういうものが欲しかったのです。
持ち帰って研究してみます。
Reply all
Reply to author
Forward
0 new messages