Google Mapでは地図上で右クリックをすると、ルート設定等のメニュー(コンテキストメニュー)が表示されますが、Google Maps APIでは実装されていません。
ライブラリにはコンテキストメニューを表示させるContextMenuControl 1.0というのがありますが、これはv2用のもので残念ながらv3には対応していません(2011年10月時点)。

ということで、v3用の右クリックメニューを作成してみました。Google Maps APIにも間もなく標準装備されて不要になってしまう・・・なんて可能性も十分考えられますが。

右クリックメニュークラスライブラリ サンプル(mapContextMenuTest.js)
※メニューの各項目のクリック時イベントは未実装(実装版は当記事最下段)

// *************************************************************** 
//  MapContextMenu(右クリック時に表示させるメニュー)
//
//  Copyright(C) 2011 Yoshiro Tamura
//  URL:http://www.eclip.jp/
// *************************************************************** 

  function MapContextMenu(map) {

     this.map_ = map;
     this.setMap(this.map_);
     this.lat_ = this.map_.getCenter().lat();
     this.lng_ = this.map_.getCenter().lng();

  }

  MapContextMenu.prototype = new google.maps.OverlayView();

  MapContextMenu.prototype.onAdd = function(){

     this.createMenu_();
     this.stopEvent();

     var panes = this.getPanes();
     panes.floatPane.appendChild( this.menu_ );

     this.MenuVisibleOff();

     var that = this;

     google.maps.event.addListener(map, "click", function() {
        that.MenuVisibleOff();
     });
     google.maps.event.addListener(map, "rightclick", function(event) {
        that.lat_ = event.latLng.lat();
        that.lng_ = event.latLng.lng();
        that.MenuVisibleOn(event.latLng,0);
     });
     google.maps.event.addListener(map, "mouseout", function() {
        that.MenuVisibleOff();
     });

  }

  MapContextMenu.prototype.draw = function() {
  }

  MapContextMenu.prototype.createMenu_ = function() {

        this.menu_ = document.createElement("ul");
        this.menu_.style.listStyle = "none";
        this.menu_.style.position = "absolute";
        this.menu_.style.backgroundColor = "#ffffff";
        this.menu_.style.color = "#000000";
        this.menu_.style.width = "200px";
        this.menu_.style.fontSize = "12px"
        this.menu_.style.padding = "0px 0px";
        this.menu_.style.margin = "0px";
        this.menu_.style.border = "1px solid #cccccc";

        this.addListItem_(this.menu_,"ここからのルート","routefrom");
        this.addListItem_(this.menu_,"ここへのルート","routeto");
        this.addSeparator_(this.menu_,"separator1");
        this.addListItem_(this.menu_,"ズームインして詳細を表示","zoomin");
        this.addListItem_(this.menu_,"ズームアウトして広域を表示","zoomout");
        this.addListItem_(this.menu_,"ここを地図の中心にする","setcenter");
        this.addSeparator_(this.menu_,"separator2");
        this.addListItem_(this.menu_,"この場所について","abouthere");

  }

  MapContextMenu.prototype.addListItem_ = function(menu,myTxt,myAction,myVisible) {

     var listitem = document.createElement("li");
     listitem.style.padding = "5px 10px 5px 10px";
     listitem.appendChild(document.createTextNode(myTxt));

     var that = this;

     google.maps.event.addDomListener(listitem, "mouseover", function() {
        listitem.style.cursor = "pointer";
        listitem.style.backgroundColor = "#ffff99";
     });
     google.maps.event.addDomListener(listitem, "mouseout", function() {
        listitem.style.cursor = "default";
        listitem.style.backgroundColor = "#ffffff";
     });
     menu.appendChild(listitem);
  }

  MapContextMenu.prototype.addSeparator_ = function(menu,myID,myVisible) {

     var line = document.createElement("li");
     line.style.margin = "3px";
     line.style.borderBottom = "1px solid #eeeeee";
     menu.appendChild(line);

  }

  MapContextMenu.prototype.setMenuPosition_ = function(myLocation) {

     // 緯度、経度の情報を、Pixelに変換
     var point = this.getProjection().fromLatLngToDivPixel(myLocation);

     if (point.x + this.menu_.offsetWidth > this.map_.getDiv().offsetWidth) {
        point.x = point.x - this.menu_.offsetWidth;
     }
     if (point.y + this.menu_.offsetHeight > this.map_.getDiv().offsetHeight) {
        point.y = point.y - this.menu_.offsetHeight;
     }

     this.menu_.style.left = point.x  + 'px';
     this.menu_.style.top = point.y  + 'px';
  }

  MapContextMenu.prototype.MenuVisibleOff = function () {
     this.menu_.style.visibility = "hidden";
  };

  MapContextMenu.prototype.MenuVisibleOn = function (myLocation,markerFlg) {
    this.menu_.style.visibility = "visible";
    this.setMenuPosition_(myLocation);
  }

  MapContextMenu.prototype.stopEvent = function() {
     var events = ["click", "dblclick", "rightclick", "mousedown", "mouseup",
         "mousemove", "mouseover", "mouseout", "dragstart", "dragend", "contextmenu"];
     var menu = this.menu_;

     for (var i = 0, event; event = events[i]; i++) {
        google.maps.event.addDomListener(menu, event, function(e) {
           e.cancelBubble = true;      //IE
           if (e.stopPropagation) {
              e.stopPropagation();     //Firefox
           }
        })
     }
  };

上記コードのMAP表示(contexttest.html

右クリックメニュー

右クリックメニュー

各メニュー項目の機能も実装したものは、下記を参照下さい。
・右クリックメニュークラスライブラリ(mapContextMenu.js
・MAP表示(context.html

コメント   

Google Maps API v3では、次のようなコードでDIV要素内にストリートビューを表示させることが出来ます。

var panorama = new google.maps.StreetViewPanorama(document.getElementById(“DIV要素ID”), パノラマオプション);
以下の例ではMAPの右側にストリートビュー用のエリアを確保し表示させています。

ストリートビューTEST

情報ウィンドウ内に表示させる場合も同様で、DIV要素を配置しストリートビューを埋め込めばよいのですが、上記の場合
では埋め込み対象のDIV要素がHTMLにて配置されているのに対し、情報ウィンドウはJavascriptにて定義するオブジェクトなので、
ページロード時には存在していません。そのためストリートビューも生成するタイミングを誤ると上手く表示されません。

まずは、表示出来ないソース例から

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  var TokyoTower = new google.maps.LatLng(35.65806343284446,139.74542960885162);

  function initialize() {

     var myOptions = {
        zoom: 14,
        center: TokyoTower,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     var marker = new google.maps.Marker({
         position: TokyoTower,
         map: map,
         draggable: true
     });

     var contentString = "\<div id='pano' style='width:300px;height:200px;'\>\</div\>";
     var infowindow = new google.maps.InfoWindow({
         content: contentString
     });

     google.maps.event.addListener(marker, 'click', function() {
        var panoramaOptions = {
            position: marker.getPosition(),
            linksControl: false,
            addressControl: false,
            enableCloseButton: false
        };
        var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
        infowindow.open(map, marker);
     });
  }

</script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:80%"></div>
</body>
</html>

上記コードのMAP表示(streetviewtest2.html

上記コードでは27行目で
var contentString = “<div id=’pano’ style=’width:300px;height:200px;’></div>”
とDIV要素「pano」を定義し、28~30行目で情報ウィンドウを作成しています。
一方ストリートビューは39行目で生成させています。
var panorama = new google.maps.StreetViewPanorama(document.getElementById(“pano”), panoramaOptions);
この命令はマーカークリック時のものなので、その時点ではDIV要素「pano」は定義上は存在しているはずなのですが、まだ表示はされていないため「panoは見つかりません」といったエラーが発生し、ストリートビューは表示されません。
対象DIV要素の表示後にストリートビューを作成するには、domreadyを利用します。
以下のコードでは正常に表示されます。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  var TokyoTower = new google.maps.LatLng(35.65806343284446,139.74542960885162);

  function initialize() {

     var myOptions = {
        zoom: 14,
        center: TokyoTower,
        mapTypeControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     var marker = new google.maps.Marker({
         position: TokyoTower,
         map: map,
         draggable: true
     });

     var contentString = "<div id='pano' style='width:300px;height:200px;'></div>";
     var infowindow = new google.maps.InfoWindow({
         content: contentString
     });

     google.maps.event.addListener(infowindow, 'domready', function() {
        var panoramaOptions = {
            position: marker.getPosition(),
            linksControl: false,
            addressControl: false,
            enableCloseButton: false
        };
        var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
     });

     google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
     });
  }

</script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:80%"></div>
</body>
</html>

上記コードのMAP表示(streetviewtest3.html
マーカーを移動させると、以降の情報ウィンドウ表示にはストリートビューも更新されます。

コメント   

2011年10月8日(土)、北岳・間ノ岳を「弾丸登山」してきました。

ルート
 往路:広河原-白根御池小屋-二俣-(左俣コース)-八本歯のコル-北岳山頂
       -北岳山荘-中白根山-間ノ岳
 復路:北岳山荘から北岳山頂を経由せずにトラバース道で八本歯のコルへ抜けた以外は往路と同じ

通常ならば1泊もしくは2泊のコースなんだと思いますが、今回は日帰りです。
本当は途中で1泊して塩見岳方面へ抜けるコースにしたかったのですが、その場合の宿泊地点の熊ノ平小屋は先月末の時点で既に営業終了。
無人でも一部開放していて利用出来るようなのですが、寒そうですし他に登山客が一人もいないという可能性も高いため、万一のことを考えて却下。次回のお楽しみにしました。

甲府駅発広河原行きバスの始発時刻が朝の4:00、次の便だと9:00になってしまうので始発に乗らないと日帰りは出来ません。ということで、深夜(0:40)着の特急で甲府入りし駅で仮眠。駅寝なんて数十年ぶりですが、空港寝は数年前に経験していますし、結構こういうのは大丈夫な方なので・・・。この日はかなり冷えましたが寝袋があるので大丈夫。
もう秋のせいか同様に駅寝をしている方は意外と少なかったですが、3連休の初日ということもありバスターミナルは早朝から大勢の登山客が集まっていました。皆さんはホテルに宿泊されたんでしょうか?それともファミレスあたりで待機されていたのでしょうか?。バスはかなり増便した模様です。

登山口の広河原には6時過ぎに到着。帰りの甲府駅行き最終便は16:10発なので10時間で戻ってくればよい計算。
昭文社の「山と高原の地図」記載の所要時間によれば上記ルートで約15時間。本来ならば最短の大樺沢コースが先日の台風で崩落して通行止めになってしまったのは少々痛いですが、
まあ何とかなりそうですし、宿泊用装備は整えているので間に合わなくても問題なし、無理をする必要はないとの計画でスタートしました(6:15)。

吊り橋

吊り橋を渡って登山スタート

(7:35)白根御池小屋へ到着。結構いいペースで来れました。ここまではいわゆる林間コース。二俣の辺りからいよいよ展望が開けてきます。この日の朝は絶好の天気、空気も澄んでいて向かいの鳳凰三山の稜線もくっきりと見えました。

白根御池小屋

白根御池小屋

鳳凰三山

鳳凰三山

時期的に期待していた紅葉は、雑誌に掲載されている写真にあるような、圧倒されるものではありませんでした。ジャストシーズンではなかったのか、あるいはそもそも北岳は紅葉の名所ではないのかよく分かりません。それでも平地よりも一足早い紅葉をそれなりには楽しめました。

紅葉1

紅葉1

紅葉2

紅葉2

ナナカマド

ナナカマド

 
北岳は見る位置によって形が大きく変わります。左俣から山頂を巻くような感じで登っている途中、正面からではよく分からない「北岳バットレス」の正体が明らかになりました。
ロッククライミングの聖地、大迫力です! あんな崖、どんなに経験積んだとしても私には絶対に登れません。

北岳バットレス(正面より)

北岳バットレス(正面より)

北岳バットレス(側面より)

北岳バットレス(側面より)

急斜面もほとんど休むことなく登り続け、(9:45)山頂着。ちょうど3時間半かかりました。本当は3時間で登りたかったのですが、やはり大樺沢コースを通れない分遅くなってしまいました。
山頂でしばらく休憩。雲海に浮かぶ富士山、仙丈ヶ岳、甲斐駒ヶ岳、そして遠方には八ヶ岳の姿も・・・、素晴らしい眺望でした。

北岳山頂

北岳山頂

北岳山頂からの眺望 富士山

北岳山頂からの眺望 富士山

北岳山頂からの眺望 仙丈ヶ岳

北岳山頂からの眺望 仙丈ヶ岳

北岳山頂からの眺望 甲斐駒ヶ岳

北岳山頂からの眺望 甲斐駒ヶ岳

北岳山頂からの眺望 八ヶ岳

北岳山頂からの眺望 八ヶ岳

 
北岳から間ノ岳までのルートはずっと尾根づたいです。この日は風が強くてとにかく寒かったので休まず歩き続けました。当然の事ながら、この時期の高山登山では防寒着・手袋は必携ですね。

北岳と間ノ岳を結ぶ尾根道

北岳と間ノ岳を結ぶ尾根道(途中に見える建物は北岳山荘)

(11:30)間ノ岳山頂着。間ノ岳の標高は3,189mで日本第4位。3位の奥穂高岳とは1m違うだけですし、2位の北岳ともたったの4m差。それなのに北岳の陰に隠れて目立たなくて地味な存在の何だか可哀そうな山です。
しかし、山頂からの眺望では北岳に負けず劣らずです。何といっても北岳の姿は間ノ岳方面からのものが一番カッコイイと思います。

間ノ岳山頂

間ノ岳山頂

農鳥岳

農鳥岳

間ノ岳側から望む北岳

間ノ岳側から望む北岳

登山ですから当然復路はほとんど下り。下りは正直好きではなく、特にガレ場の急斜面では膝に疲れがたまります。怪我をしないよう慎重に降りました。雨の後だと道がつるつる滑り、下りの苦手な私はよく転ぶのですが、この日はそんな事もなくラッキーでした。
(15:30)広河原着。結局30分以上の余裕を持って帰って来れました。でも、やはり登山はゆっくり山小屋泊の方がいいですね。天気次第ですが夕日や星空、それに朝日も楽しめますし・・・。次回はそうしようと思いますが、今年は季節的に高山を登るのはこれが最後になりそうです。後は大菩薩嶺や奥多摩の山々などの低山を楽しむ予定。

今回の登山は最高の天気に恵まれ、本当に幸せな気分でした。山は最高!

コメント   

2011年10月7日(金)
国立新美術館で開催中の「モダンアートアメリカン 珠玉のフィリップス・コレクション」を観覧してきました。

国立新美術館

国立新美術館


今回出展の画家で良く知っている名前といえばジャクソン・ポロックとエドワード・ホッパーにオキーフくらい・・・これは単に私が知識不足なだけという面もありますが、前開催のワシントン・ナショナル・ギャラリー展や昨年のオルセー美術館展、シュルレアリスム展などと比較すると小粒で地味な印象です。

本展は次の10章構成となっていました。

第1章 ロマン主義とリアリズム
「これはミレーの作品です」とか「コロー作」とか言われれば納得してしまうような、バルビゾンの流れをくむ作品が何点かありました。
印象に残っているのはウィンズロウ・ホーマー作の「救助に向かう」。タイトルに反して緊迫した雰囲気があまり感じられません

第2章 印象派
ビッグネームの作家はいませんが、素晴らしい作品が揃っていたと思います。
「これはピサロ風」「シニャックもどきかな?」・・・などと好き勝手に思いながら観覧してました。

第3章 自然の力
ロックウェル・ケントの「若い男の埋葬」からは、青木繁の「海の幸」を連想しました。
(ググってみた所、やはり同じ感想を持たれた方がいらっしゃるようです)

第4章 自然と抽象
オキーフの作品が4点。嫌いではないけれど・・・すごい作品とは思えなかったです。オキーフさん、ごめんなさい

第5章 近代生活
本展パンフレットの表紙にもなっているエドワード・ホッパーの「日曜日」が展示されていました。
「ホッパーの作品が見られた」という点では有意義でしたが、やっぱり代表作の「ナイトホークス(シカゴ美術館)」が見たいですね。
同じ「日曜日」というタイトルでも、昨年見たシャガール作品にはかなり惹かれてしばらくの間離れることが出来なかったのですが…。

第6章 都市
ジョン・スローンの「冬の6時」という作品は、今回展示の100余点の中で一番のお気に入りです。

第7章 記憶とアイデンティティ
ジェイコブ・ローレンスの「大移動」というシリーズ(全60作)のうち、5点が展示されていました。
対外的にはあまり知られていないアメリカの歴史の一面(アフリカ系アメリカ人の南部から北部への移住の事象)を垣間見ることが出来る作品でとても興味を持ちました。
出来れば全作品を通しで見てみたいです。リトグラフでもいいので・・・ワタリウム美術館あたりで企画してくれないかな?
グランマ・モーゼスは東郷青児美術館でも何点か見たことがありますが、どことなくブリューゲル風でとても好きです。ジグソーパズルに合いそうな絵柄。

第8章 キュビズムの遺産
本家ピカソやブラックほどの大胆さに欠けている気が・・・。正直、中途半端な印象でした。

第9章 抽象表現主義への道
ジャクソン・ポロック作の「コンポジション」はポロック作品の中では秀作の部類に入らないのでは?
近代美術館で来年開催されるポロック展に期待は持ち越しです

第10章 抽象表現主義
抽象画も割と好きなんですが、私の感性では今展示作から「何か」を感じることは出来ませんでした。

アンディー・ウォーホルやキース・ヘリングといったポップアートの奇才が登場するのは、この後の時代・・・ということで、本展は「アメリカンアート夜明け前の良作たち」といった趣向だったのでしょうか?
個人的な収穫はジョン・スローンでした。

コメント   

2011年10月2日(日)
チャリティランINグローバルフェスタに参加してきました。
グローバルフェスタは毎年この時期に日比谷公園で開催される、発展途上国の支援等を行っているNGO・NPO団体が一堂に会するイベントです。チャリティランはその一環として行われるもので今年で18回目、距離は5km,10km,15km,20kmの4種類あります。年々参加者は増え続け、私がエントリーした時点では15kmの部以外は全て既に定員達成で締切となっていました。

グローバルフェスタ入口

グローバルフェスタ入口

チャリティーランスタート地点

チャリティーラン スタート地点(桜田門)

チャリティランは皇居を周回するだけの単純なコースで記録計測や順位表彰等もなく、そもそも皇居外周コースは道幅も狭く混雑で自分のペースでは走れないので、私にとってはおまけ的なイベント。こちらは軽く流して終え、メインの目的である出展ブース巡りを楽しみました。
300近い団体が集まっているので、ボランティアに興味がある方・参加したい方にとっては貴重な情報収集の場ですが、各国の食べ物や民芸品・民族衣装の販売・紹介等をするブースが所狭しと並んでいるので、難しいことを考えずに単にアフリカやアジアの雰囲気を楽しみたいといった方にとってもお勧めのイベントです。私は後者の部類で、興味は専ら各国料理・・・・。

メインステージ

メインステージ ルー大柴トークショー

アフリカ音楽ライブ

アフリカ音楽ライブ

出展ブース1

出展ブース1

出展ブース2

出展ブース2

フードエリアではカレー(国によって様々な特色あり)やカバブ、エスニック風の麺類など馴染みのあるメニューが比較的人気となっていましたが、せっかくの機会なので普段はなかなか目にしないような珍しいメニューを探し歩きました。

フフ : タロイモの粉を練って茹でたもので、ベナンでは定番メニューだそうです。団子のような食感で、ほのかに甘みがあります。トマトとオニオンのソースが良く合います。間違いなく日本人好みの味だと思います。

フフ

フフ(ベナン)

ホンムス: パレスチナの家庭料理。ヒヨコ豆をペースト状にしたもので、ピタパンにつけて食べます。ピーナッツをマイルドにした感じでヘルシー。毎日食べても飽きなさそう
マラミーヤ: セージティー。「ザ・ハーブティー」といった風味です。しばらくの間、口の中に香りが残ります。

ホンムスとマラミーヤ

ホンムス(左)とマラミーヤ(右) (パレスチナ)

クスクス: クスクスはそれ程珍しくはないですね。サフランのきき具合が絶妙でした。

クスクス

クスクス(ギニア)

カラマンシージュース: カラマンシーはフィリピンではごく定番の柑橘類だそうです。知らなかったです。シークヮーサーの仲間のようですが、酸味はそれほど強くありません。トロピカルフルーツ特有の臭みもほとんど感じませんでした。飲みやすいですが、反面クセになる味ではないかも。

カラマンシージュース

カラマンシージュース(フィリピン)

ゴーギー・・・パキスタンのお菓子。かりんとうと煎餅を足して2で割ったような味。不味くはないけれど、ちょっと期待外れでした。

ゴーギー

ゴーギー(パキスタン)

この他にも「らくだのシチュー」「トゥクパ(チベットのほうとう)」などがありましたが、さすがに全ては食べられません。というか、既にカロリーオーバーです。

なお、今年は東日本大震災の被災地応援の食品・グッズも各所で販売されていました。

南三陸町産の海苔

南三陸町産の海苔

来年も参加します。

コメント