マーカーの情報をフォームなどに表示する場合、地図中に多くのマーカーが設置されていると、現在選択中のマーカーがどれなのか分からなくなってしまうことがあるかと思います。
この問題は、選択したマーカーの画像を変更することで解決出来ます。

以下のサンプルコードは、地図中にマーカー50個をランダムに配置し、クリックすると位置情報(緯度・経度)が表示されるというシンプルなものです。
マーカー画像も配置時に7色(白・黒・青・黄・緑・橙・桃)の中からランダムに選び、クリック時にやや大きい赤い画像に変更させる仕様となっています。

<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 FuchuStation = new google.maps.LatLng(35.6721380859535, 139.48036637411883);
  var MarkerImage = ["white.png","black.png","blue.png","yellow.png","green.png","orange.png","pink.png"];
  var myBounds;
  var southEnd, northEnd, westEnd, eastEnd;
  var myMarker = new Array;
  var CurrentMarkerNo = -1;

  function initialize() {

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

     google.maps.event.addDomListenerOnce(map, 'idle', function() {
        myBounds = map.getBounds();
        southEnd = myBounds.getSouthWest().lat();
        northEnd = myBounds.getNorthEast().lat();
        westEnd = myBounds.getSouthWest().lng();
        eastEnd = myBounds.getNorthEast().lng();
        for(var i = 0; i < 50; i++) {
           setMarker();
        }
     });

  }

  function setMarker() {

     var myImage;
     var myColorNo;
     var myLat,myLng;
     var myLocation;
     var mNo = myMarker.length;

     //マーカー画像は7色の中からランダムに選択
     myColorNo = Math.floor(Math.random() * MarkerImage.length);
     myImage = "icon/"+  MarkerImage[myColorNo];

     //位置もランダムに配置(表示地図中に納まる範囲)
     myLat = southEnd + (northEnd - southEnd) * Math.random();
     myLng = eastEnd + (westEnd - eastEnd) * Math.random();
     myLocation = new google.maps.LatLng(myLat, myLng);

     //マーカー設置(配列に収納)
     myMarker[mNo] = new google.maps.Marker({
        map: map,
        position: myLocation,
        title: "marker"+mNo,
        icon: myImage,
        draggable: false
     });
     myMarker[mNo].colorNo = myColorNo; //設置した画像の色Noを登録

     //クリック時処理
     google.maps.event.addListener(myMarker[mNo], 'click', function() {
        document.getElementById("marker_lat").value = myLat;
        document.getElementById("marker_lng").value = myLng;
        changeMarkerImage(mNo);
     });

  }

  function changeMarkerImage(markerNo) {

     //前回の選択マーカーの画像を元に戻す
     if (CurrentMarkerNo >= 0 && markerNo != CurrentMarkerNo) {
        var formerImage = "icon/" + MarkerImage[myMarker[CurrentMarkerNo].colorNo];
        myMarker[CurrentMarkerNo].setIcon(formerImage);
     }
     //選択したマーカーの画像を変更
     myMarker[markerNo].setIcon("icon/l_red.png");
     CurrentMarkerNo = markerNo; //選択したマーカーの配列番号をグローバル変数にセット
  }

</script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:95%"></div>
  <div>選択したマーカーの位置情報&nbsp;&nbsp;
     緯度:&nbsp;<input type="text" id="marker_lat" name="marker_lat" size="25">&nbsp;&nbsp;
     経度:&nbsp;<input type="text" id="marker_lng" name="marker_lng" size="25">
  </div>
</body>
</html>

マーカー画像の変更はsetIconメソッドで簡単に実現出来ます。
・myMarker[markerNo].setIcon(“icon/l_red.png”) (84行目)
ただ、これだけだとクリックしたマーカーが次々と「icon/l_red.png」に変わってしまうため、前回選択していたマーカーの画像を元に戻す必要があります(79~82行目)。
元画像の情報(配列番号)はグローバル変数に登録する形式でも良いのですが、今サンプルでは次のように各マーカー設置時に配列要素の1つとして登録しています。
・myMarker[mNo].colorNo = myColorNo (65行目)
この「colorNo」というのは元々GoogleMapsApiのMarkerプロパティに存在するものではなく、新たに追加したものです。このように勝手に追加した配列要素(プロパティ)もiconやtitleといった本来のプロパティと一緒に使用出来るので、マーカーに様々な情報(住所や電話番号など)を持たせたい時には便利です。

 

コメント   

2012年1月28日(土)
 北浦和にある埼玉県立近代美術館へ「アンリ・ル・シダネル展」を観覧に行ってきました。

埼玉県立近代美術館

埼玉県立近代美術館

 ル・シダネルはヨーロッパでは人気があるそうですが、日本ではあまり知られていない画家だと思います。個展が国内で開催されるのは今回が初めてとのことです。
 恥ずかしながら、私はこれまで名前すら知りませんでした。本展覧会のちらしの絵が私の好みだったので、気まぐれ的にぷらっと出かけてみたのですが、これが大当たり!かなり良かったです。

 身の回りのありふれた風景を描いた作品(アンティミスムというそうです)が殆どなのですが、幻想的・神秘的といった印象を受ける作風です。月明かりにぼんやりと映し出された風景だったり、もやがかかっていたり。
 多くの作品に「灯」が描かれていますが、これはル・シダネルの好みのモチーフだったのではと思います。黄昏時の窓の灯、運河や川面に映える静かな家々の灯り、テーブルに置かれたボトルやグラスに反射される部屋の灯りetc・・・。
 ネオンのようなぎらぎらした照明や蛍光灯のような白い光ではなく、ランプの柔らかなオレンジ色の灯。
 何かほっとするような、心が安らぐような作品ばかりでした。

夕日のあたる大聖堂[ボーヴェ]

夕日のあたる大聖堂[ボーヴェ]

運河[アミアン]

運河[アミアン]

 
離れ家[ジェルブロア]

離れ家[ジェルブロア]

室内[ジェルブロア]

室内[ジェルブロア]

 
青いテーブル[ジェルブロア]

青いテーブル[ジェルブロア]

雪のなかの家[ヴェルサイユ]

雪のなかの家[ヴェルサイユ]

 知名度が低いせいなのか、或いは開催地が都内でないせいなのか、土曜日なのにかなり空いていました。
 その分、ゆっくりと観覧出来たのは良かったのですが、もっと人気が出てもいいんじゃないかと思います。
 アンリ・ル・シダネル・・・素晴らしい画家です。
 本展覧会の会期は2月5日までですが、この後も巡回展示され、東京(損保ジャパン東郷青児美術館・新宿)でも4月から開催されます。機会があれば是非!おすすめです。

コメント   

先日、京王百貨店新宿店恒例のイベント「有名駅弁とうまいもの大会」に立ち寄ってきました。
駅弁が集結するイベントは今ではあちこちでありますが、ここが元祖で今回が47回目。
今年は、「がんばろう日本!東北特集」をテーマに掲げていたので、その主旨に乗って東北から出品されている商品をいくつか購入しました。

鮭いくら弁当(箱)

北三陸野田村 鮭いくら弁当(箱)

鮭いくら弁当

北三陸野田村 鮭いくら弁当

・北三陸野田村 鮭いくら弁当(1,200円)
 岩手県の三陸海岸北部に位置する野田村からの出品。第3セクターの三陸鉄道は東日本大震災の津波による被害で不通となり、まだ一部しか復旧していません。そんな中で、復興への想いを込めて陸中野田駅・野田村の皆さんが一丸となって作った新たな駅弁とのこと。
 この弁当は、イクラが大量に乗っかっていて、ご飯が足りないくらいでとっても贅沢。菊の酢漬けがかなり美味しくこれは新発見!。寒締めほうれん草は甘みたっぷり。鮭のしょうゆ漬けは野田村の名産品の1つだそうですが、ちょっとパサついていて個人的にはもっと生っぽい方が好みかな。温かいご飯やお茶漬け等には合いそうですが・・・。
 とても美味しいけれど、全体的にインパクトが弱いかなあという印象。イクラや鮭を使った駅弁はたくさんあるので、人気駅弁として定着出来るかとなるとライバルとの差別化という点で疑問。と思ったのですが、後で当イベント特設サイトの記事を見た所、「本当は三陸名産のホタテやウニ、アワビ等を使用したかったのだけど、それらの生産は津波被害で壊滅状態で、やむなく現在調達出来る精一杯の食材で作ったのが今回の鮭いくら弁当」だとのこと。弁当の容器も簡素なものですが、これもきっと現状ではそこまで手が回らないということなのでしょう。
 この記事を読んで、応援したい気持ちが更に強くなりました。野田村、そして三陸鉄道・・・一刻も早い復旧・復興を願ってやみません。機会があれば遊びに行ってみたいです。また、新生の野田村の駅弁を楽しみに待ちたいと思います。

赤かぶ千枚漬

赤かぶ千枚漬

菊芋漬

菊芋漬

・青森県 熊谷食品 「赤かぶ千枚漬」と「菊芋漬」(合わせて1,260円の所、1,050円に割引)
 ここの品は以前に聖蹟桜ヶ丘に出品していた時にも購入したことがあるのですが、とにかく販売の津軽弁丸出しのおばちゃんがいい味出しています。このおばちゃんと話すだけでも買い物をする価値あり。
 もちろん味の方も抜群。「葉くるみ漬(今回購入せず)」が人気だそうですが、個人的には赤かぶが一番好き。「菊芋」というのは今回初めて食べましたが、ゴボウのような食感。こちらも美味しいです。

梅みぞれ

梅みぞれ

・岩手県 及川農園 梅みぞれ(1,000円)
 「正統派梅干し」といった感じ。とっても素朴で、そして酸っぱいです。

萩の月(箱)

萩の月(箱)

萩の月

萩の月

・宮城県 菓匠三全 萩の月(5個入り735円)
 説明不要ですね。類似品は数あれど、やはり萩の月が一番です。

本当は秋田・大館駅の「鶏めし弁当」等、試したい駅弁はたくさんあったのですが、一度には食べられないので仕方なし。来年のお楽しみ。

コメント   

2012年1月18日(水)
本年最初の美術館詣は、国立西洋美術館で開催中のゴヤ展へ。
上野は少し遠いので、そちら方面に用事がある時についでに行こうと思っていたのですが、そんな用事がないまま会期末が迫ってきてしまったので、時間を作って出かけてきました。

本展覧会の目玉はやはり「着衣のマハ」でしょう。40年ぶりの来日だとか。
「マハ」というのはモデルの女性の名前かと思っていたのですが、「小粋な女性」を意味する一般名詞だとのことです。
そんなマハ達を描いた作品の数々の他、宮廷画家としての皇族・要人肖像画、宗教画、教会の堕落を風刺する版画、戦争の惨劇を描いた作品・・・など本展示作は多岐に渡っていて見所たっぷりでした。

着衣のマハ

着衣のマハ

理由があろうとなかろうと

理由があろうとなかろうと

マハとマントで顔を覆う男たち

マハとマントで顔を覆う男たち

スペイン王子フランシスコ・デ・パウラ・アントニオの肖像

スペイン王子フランシスコ・デ・パウラ・アントニオの肖像

<ロス・カプリーチョス>13番 かっかしている

<ロス・カプリーチョス>13番 かっかしている

聖フスタと聖ルフィーナ(下絵)

聖フスタと聖ルフィーナ(下絵)

観覧料は1500円と安くはありませんが、特別展チケットで国内随一の所蔵を誇る常設展示も観覧出来るのでお得です。ゴヤ展だけでお腹一杯で、以前に何度か見ている常設展示はさっと流す形になりましたが、敬愛するギュスターヴ・モローの作品2点はじっくりと・・・。

いつの日か、プラド美術館にて今回見た「着衣のマハ」と未見の「裸のマハ」を同時に閲覧したいものです。私にとってプラド美術館は「絶体に行きたい美術館」第1位。門外不出の至宝、ベラスケス作「ラス・メニーナス」が待っていますので・・・。

コメント   

日野市や多摩市には坂があちこちにあり、坂好きな私にとっては何とも嬉しい限りなのですが、多摩モノレールの程久保駅の西側、高幡不動駅の南西に位置する住宅地もその1つ。
さほど凄い坂という訳ではありませんが、起伏に富んでいて「登って下ってまた登る」といった感じで走れるので足腰が鍛えられます。
なお、鹿島台住宅の各角地のブロック塀にはアルファベットが・・・区画を表す記号なのか?謎です。

写真1

写真1


写真2

写真2


写真3

写真3


ブロック塀に謎のアルファベット

ブロック塀に謎のアルファベット

コメント