Atelier

　酷暑で屋外での活動は歳を考えて自粛していた。それで、自然とパソコンに向かう時間が多くなっていた。取り組んだのは、V3 にバージョンアップした Google Maps JS API で旅行地図などを作成するなどのいろいろなトライである。

　といっても、一から Google Maps JS API で希望する地図を作成する能力はないから、公開されている人様のコードをいじることが主体である。このようなときに、重宝させていただいているのは、Using the Google Maps API v3にあるサンプルである。
　Mike Williams' tutorial　というサイトで V2 でサンプル表示されていた More advanced stuff - Part 25 Marker Categoriesを、V3 コードに置き換えた translated to v3というのが紹介されている。これを利用すれば、野鳥撮影地点を種別に表示するときなどに使えそうと思い自分のできる範囲でいじって見ることにした。

　このような作業をする時の手順は、だいたい次のようにしており、備忘録として記録しておきたい。

1. サンプル画面のソース・コード（IE の場合、メニューバーの表示⇒ソース）を取得する。これを、テキスト編集ソフト（私の場合：秀丸）にコピペし、名前をつけて、適当なフォルダーに、html ファイルとして保存する。
2. サンプルコードで使用されている Javascript ユティリティ ファイル（今回の例では、downloadxml.js　ファイル）や使用するマーカイメージ・ファイル（今回のサンプルでは、marker_red.png のようなファイル）を用意し、ファイル転送ソフト（私の場合：FFFTP )でサーバー（私の場合：Xserver ）上の適当なフォルダーにアップロードしておく。
3. サンプル・コードで使用されている xml ファイル（普通はサンプル・コード内で相対パスで表示されている。これを絶対パスにして、ブラウザで表示させる）をC&P して、秀丸の新しいファイルとする。適当な名前（xmlファイルで）で保存する。これも、先ほどと同じサーバー上の同じフォルダーにアップロードしておく。
4. 秀丸画面で、自分の環境に合うように、サンプルコードのそれらのファイルの path を書き換える。私の場合、ミスがないように、絶対パスで書くことにしている。
5. 自分のサーバー環境に合わせたサンプル・コードをブラウザで表示してみる。これで、參照サンプルと同じように表示されたら、サンプルのコピーは成功である。
6. このサンプルコードを少しづついじって、目的とする地図（今回、地元の公園・ホームセンター・大型電気店を種別（ caｔegory ）に表示することを目指した。）に近づけていく。先ず、地図の中心を地元にするために、地図の center 緯度・経度を置き換えた。
7. と同時に、xml ファイルも、サンプルで使われているファイルを真似して、新たに日本語を含むファイルを作って（XML ファイルの編集は、XmlNotepad を使っている）サーバー上にアップロードした。（日本語のエンコードは、UTF-8 ）
8. その他、caｔegory の名前を変えたことに対応する修正などを加えて保存、サーバーにアップロードして、ブラウザで表示してみた。地図やチェックボックス、日本語のサイドバーは、期待通り表示されたが、肝心のマーカーが表示されない。元のサンプルコードと見比べながら、チェックしてみたが、原因が分からない。
   ＪａｖａＳｃｒｉｐｔや HTML のコードは、カンマ一つ抜けても動かないことがあるので、再度やり直すなど作業を続けて見たが、うまくいかない。
9. 3日間ほど悩んで、諦めかけていたが、原因はどうやら XML ファイルにあるらしいと思われたので、再度フィルを眺めていると、ing（longitude：経度） と lat（latitude：緯度）の数字が入れ替わっていることに気がついた。今まで、このような XML ファイルは lat ⇒ lng という順序で記入していたのに、今回使ったサンプル XML ファイルは順序が逆になっていたのだ。サンプル XML ファイルの経度・緯度が海外の地点を示していたので、気づくのが遅れたらしい。
   　数字を入れ替えてみると期待通りに表示されるようになった。ミスというのは大体において、このようにうっかりミスが多いものだが、ついつい難しく考えてしまいがちだ。
10. このサンプルコードを土台に、マーカーの吹きだし(infowindow) に画像やリンクURL を表示を試みたが、それらも OK のようである。
    　なお、写真の表示が、画面の中心に表示され背景がフェードアウトする lightbox も使えるので、今後いろいろな応用ができるのではないかと考えている。

　作成例：泉北ニュータウンの公園・ホームセンター・大型電気店地図 サンプル・ページ

　　

　先のエントリー【隠居、真夏の山陰旅行を楽しむ】で、訪れた地点の地図を、Google Maps API V3 で作成してみた。
　訪問順に番号付きのマークを入れたいのだが、なかなかうまく行かない。ネットでいろいろと探ってみたが、ピッタリのサンプルが見あたらない。そのようなサーチの間に、標準のマーカー・アイコンを種々のアイコンに変える方法が分かったので、赤い押しピンを模したアイコンを採用してみた。このような種々のマーカー・アイコンは、Google から提供されていて、ダウンロードしなくても直接リンクすることで使えることも分かった。

　この地図は、加賀地方へ旅行した時とほぼ同じ形式であるが、各地点の経度・緯度、写真へのリンクなどは、外部ファイルとしての XML ファイルを呼び込む形式を取っている。

　最近、野鳥撮影はもっぱら NikonD90 と Σ120-400mm との組み合わせである。これに、GPS ユニットの Nikon GP-1 を付けている。これだと、カメラのアクセサリー・シューにつけて、アクセサリー・ターミナルとコード接続しておけば、撮った写真のEXIF（イグジフ：exchangeable image file format for digital still cameras）情報の一部として撮影時刻などと同じように経度・緯度・高度が記録される。つい最近までは、SONY の GPS を一緒に携帯し、GPS Image Tracker というソフトを使って、撮影位置情報を得てきたが、写真の整理に時間がかかり手間であった。
この情報を使って、【野鳥写真のサムネイル】からリンクする野鳥撮影地点プロット地図を作成したいとと思ってきた。なんでも記録することが、このごろの習い性となっている。

　方法については、右サイドフレームに載せている旅行地図作成に使っている Google Maps API の応用を何度かトライしてみたが、乏しい知識では満足いく結果は得られなかった。
　そこで、 昨年10月に掲載した、【隠居のパソコン備忘録：Google Maps と Picasa を使って位置情報を持つ写真を掲載する】の方法をもとに、位置情報を持たない写真に位置情報を付加するなどの新しいやり方も付け加えて、プロット地図を作ってみた。先のエントリーと重複する部分もあるが、改めて備忘録として残しておきたい。
　私の場合、今まで撮影した写真は Picasa に収納している。オリジナルの写真はほとんどNikon D90 の Fine L(4288x2848pixel) あるいはD70 Fine L(3008x2000pixel) で撮っているが、ブログに載せる写真は、800x530pixel に縮小して別フォルダに収納している。これらの写真を種別に整理したのが、【野鳥写真のサムネイル】である。
種別野鳥の撮影地点プロット地図を作成する方法を、以下、順をおって記録する。例として、野鳥サムネイルに掲載しているツグミの写真撮影地点地図の作成を取り上げる。

1. プロット地図を作成するためには、これらの写真を集めておく方が後々便利なので、適切な場所に新しいフォルダーを作成（一般的な方法で,今回は、【tsugumi】というフォルダーを作成）し、収納する写真をこのフォルダーにエクスポートした。
2. このようにして集めた写真をPicasa のライブラリー・サムネイル写真でみると、EXIF に経度・緯度が取り込まれている場合には、下のスクリーンショットのようにサムネイル写真にマーカーが表示される。ここで集めた写真は、GPS ユニットを使っていなかったときの写真も含まれるので、マーカーが表示されていない写真もある。
   
   
3. マーカーが表示されていない写真の撮影地点マークを貼り付けるには、Picasa の下段ツール・アイコンで【「場所」パネル表示/非表示】ボタンをクリックするとおなじみの Google Map の地図が出てくるので、Google Map の機能を使って拡大・縮小や移動を行い、写真を撮った地点が特定できる区域地図を表示させる。
   　撮影地点を特定したい写真を選択し、地図の拡大（+）・縮小 （ー）マーク横の緑マーカーをクリックすると緑色の小さなマーカーが出てくるので、これをドラッグして目的とする地点でクリックすると、「写真をここに配置しますか？」とのポップアップ画面がでてくるので、OK とするとマークを立てることができる。
   
   
4. すべての写真にマークが立ったら、Picasa の【ツール】 ⇒【アップロード】⇒【Picasa ウエブアルバムにアップロード】と選択すると、アルバムのタイトルなどを指定する下のスクリーンショットのようなアップロード画面が現われる。例えば、この画面で、タイトルを "ツグミ" としてアップロードすると新しいウェブアルバムが作成される。これは、Picasa の画面右上にある【ウェブアルバム】タグをクリックして確認できる。（もし、アカウントのない場合は、アカウントを登録する必要がある）
   
   
   
5. 【ウェブアルバム】の画面で、新しく作成したアルバムをクリックすると、アルバムにアップロードした写真のサムネイルが表示される。この画面の右フレームの下の方にある、【Google Earth で表示】をクリックすると、作成された KML ファイルを保存するかどうかの下のようなポップアップが開くので、適当な名前をつけて適切なフォルダーに保存する。
6. ここで、Picasa と　Picasa ウェブアルバムを閉じて、新たに【 Google マップ】を開く。左上の【マイマップ】をクリックし、【新しい地図を作成】画面を開く。新しく作る地図のタイトルを入力し、【インポート】をクリックするとインポートするファイルを指定する画面がでるので、先程保存したKML ファイルを指定してアップロードすると下のような画面になる。
   この時、Internet Explorer では、
   "Bad request"
   "Your client has issued a malformed or illegal request"
   というエラーが出て、うまくいかないことがある。
   Google のブラウザー　Google Chrome では問題なくアップロードするので、こちらを選んだほうが良い。やはり、Google ソフトは　Google 同士の方がうまく動くようだ。
   
7. この画面では小さな写真が、その写真を撮った地点にマークになっているが、これでは分かりにくい。
   この小さな写真をいろいろなアイコンに置き換えることができる。
   基本アイコンにもいろいろと用意されているが、マイアイコンを設定することもできる。ネットでサーチするとフリーのアイコンがいろいろと提供されており、これらを追加して（私の場合、レンタルサーバーにアイコンの gif ファイルを転送しておいた）使用することができる。今回の地図では、ツグミのアイコンが見当たらなかったので、体型のにているムクドリのアイコンを使ってみた。
   方法は、編集モードで、ふき出しにでている小さな写真をクリックすることで、置き換えることができる。(Google Maps ヘルプを参照）
   
   
   
8. また、ふき出しにでてくる　HTML のコードをいじることで、表示を変えることができる。
   アイコンをクリックして出てくる表示のサムネイル写真をクリックするとより大きな写真がウェブアルバムに表示される。
   作業途中でも保存しておけば、再度マイマップから該当する地図を開けば、編集を再開することができる。
9. 今回の目的は、【野鳥写真のサムネイル】からリンクする野鳥撮影地点プロット地図を作成しリンクすることであるので、ページに貼り付ける　HTML コードが必要である。
   　このコードは、先程の Google Map の右上にある　リンク　ボタンをクリックすると貼り付けるコードが表示される。この時、埋め込み地図のカスタマイズとプレビューの表示が出るので、これをクリックすると下のようなカスタム画面が出るので、地図のサイズなどをカスタマイズすると、この画面の下の方に、HTMLコードが表示される。
   
   
10. このHTMLコードを多少編集して、このエントリーに貼り付けて表示させたのが、下のプロット地図である。
    このプロット地図は、Google Map そのものであるので、航空写真に変えたりすることができる。また、マーカー（小鳥のアイコン）をクリックすると、その地点で撮影した写真が表示される。下の地図で試して欲しい。
    
    

　この方法を使って、記録すべき情報を充実したいと思っている。

　昨年秋に、宍道湖をドライブしたときの旅行記はエントリーしたが、旅行地図を作ろうと思いながらできずにいた。
　最近新たな知識も取り入れて、宍道湖ドライブ地図を作製したので、備忘録として記録しておきたい。
　ツーリストがプロを使って作成していると思われる Google Maps API による地図には、数字や英字の入った Marker を格好良く使っている。私も使いたいと思っていたが、数字入りマーカーを作る方法がよく分からなかった。どこかに、できあいのものはないかと、"番号付きマーカー"というような言葉でネットサーチしていると、dLinkbRING というサイトを見つけた。そこで提供されている番号付きマーカーがもちろん使えるが、そのページに紹介されている、こんな便利なサイトにいくと自分の好きな色のマーカーに、数字あるいは英字を入れて作れるサービスが提供されていることが分かった。これで、次のような番号付きマーカーを作った。


　これらを地図上に表示させるには、AjaxTowerというサイトのGoogle Maps入門(Google Maps API)を参考にした。このサイトの「マーカーのアイコンを指定」の JavaScript コードを参考にして、以前に　「伊勢参り」　のエントリーで使った　GoogleMaps API コードの JavaScript 部分に手を加えてみたのが、次のコードである。

<!-- 番号入りマーカーを表示する。-->
    <script type="text/javascript">
    //<![CDATA[

    var map;
    var marker1, marker2, marker3, marker4, marker5;

    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(35.430883,133.01199),10);
    map.setMapType(G_HYBRID_MAP);

    var markerIcon1 = new GIcon();
    markerIcon1.image = "http://n-shuhei.net/xxxxxxx/xxxxxx/marker1.png";
 //   markerIcon1.shadow = "./img/shadow.png";
    markerIcon1.iconSize = new GSize(35, 40);
 //   markerIcon1.shadowSize = new GSize(70, 56);
    markerIcon1.iconAnchor = new GPoint(18, 40);

    var markerIcon2 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker2.png");
    var markerIcon3 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker3.png");
    var markerIcon4 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker4.png");
    var markerIcon5 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker5.png");

    var opt1 = {icon:markerIcon1};
    var opt2 = {icon:markerIcon2};
    var opt3 = {icon:markerIcon3};
    var opt4 = {icon:markerIcon4};
    var opt5 = {icon:markerIcon5};

    marker1 = new GMarker(new GLatLng(35.469199,133.053875), opt1);
    marker2 = new GMarker(new GLatLng(35.44333,133.284674), opt2);
    marker3 = new GMarker(new GLatLng(35.444729,132.866077), opt3);
    marker4 = new GMarker(new GLatLng(35.401434,132.685919), opt4);
    marker5 = new GMarker(new GLatLng(35.377854,133.198242), opt5);
		
    var marker1_is_displayed = 0;
    var marker2_is_displayed = 0;
　　var marker3_is_displayed = 0;
　　var marker4_is_displayed = 0;
　　var marker5_is_displayed = 0;

    function checkbox1clicked() {
      if (marker1_is_displayed == 0) {
        map.addOverlay(marker1);
        marker1_is_displayed = 1;
      } else {
        map.removeOverlay(marker1);
        marker1_is_displayed = 0;
      }
    }

    function checkbox2clicked() {
      if (marker2_is_displayed == 0) {
        map.addOverlay(marker2);
        marker2_is_displayed = 1;
      } else {
        map.removeOverlay(marker2);
        marker2_is_displayed = 0;
      }
    }
	
	function checkbox3clicked() {
      if (marker3_is_displayed == 0) {
        map.addOverlay(marker3);
        marker3_is_displayed = 1;
      } else {
        map.removeOverlay(marker3);
        marker3_is_displayed = 0;
      }
    }
	
	function checkbox4clicked() {
      if (marker4_is_displayed == 0) {
        map.addOverlay(marker4);
        marker4_is_displayed = 1;
      } else {
        map.removeOverlay(marker4);
        marker4_is_displayed = 0;
      }
    }

    function checkbox5clicked() {
      if (marker5_is_displayed == 0) {
        map.addOverlay(marker5);
        marker5_is_displayed = 1;
      } else {
        map.removeOverlay(marker5);
        marker5_is_displayed = 0;
      }
    }
   //]]>
    </script>

もともとのコードがどこかのページからいただいたコードだから、よく理解していない部分もあるが、なんとか上手く機能しているようである。 iconSize での数字を変えることで、番号付きマーカーの形が変わるようである。また、shadow もつけられる。
　このようにして「宍道湖私的観光地図」を作った。下は、その screenshot であるが、全体像は右メニューにボタンを置いたのでクリックしてみて欲しい。

なお、このGoogle Maps入門にある「マップタイプの選択」ページで示されている JavaScript, Google Maps API リファレンスのコードを参考に、初めに表示される画面を「地図＋航空写真」(HYBRID) に設定した。
　Google Maps入門のサイトには、他にも少し学習すれば使えそうなインストラクションもあるので応用していきたいと思う。