検索結果: Atelier

　【隠居のGoogle Maps: （続）Google Maps API を使って野鳥出現地点をカスタム・マーカーでプロットする】で記録した方法で、泉北ニュータウンなどで観察・撮りためた水鳥の撮影地点をプロットしてみた。（一部は除く）　これは、【野鳥の写真サムネイル】の【大阪泉州の池・川などで撮った写真】に、【撮影地点地図】というボタンを置いて、これをクリックすると Google Map の形式で観察地点にカルガモ（水鳥を代表させている）マークが表示されるようにした。　　　　　

　先のエントリーでも記録しているが、この地図を作成するには、以下の項目を実施しなければならない。結構時間がかかる作業であるが、記録としては面白いのではないかと思っている。

掲載する写真を集めた Picasa のWeb Album を作成する。
アップロードする写真は【野鳥の写真サムネイル】を参考にしながら、ソースからすでにレンタル・サーバーにアップしている写真のファイル名を選択する。
Google Maps API の JavaScript に呼びこんでくる XML file を作成する。ここで必要なタグは、10進法の経度(lat)・緯度(ing)、表示する写真のファイル名(html)、場所名（label) である。
私の場合、XMLnotepad でもととなるファイルを開き、新しい名前で保存する。
経度・緯度は、Web Album の写真の情報をC&P する。経度・緯度情報がない場合は、Google Map で撮影地点情報を取得し、Web Album にある該当写真に10進法の経度・緯度の場所情報を付加する。
表示する写真のファイル名は、【野鳥の写真サムネイル】のソースからC&P する。また、label の地名も【野鳥の写真サムネイル】のソースから取得する。
【撮影地点地図】となる Google Maps API のJavaScript を含むHTMLを作成する。（もととなるソースを新しい名前で保存する。)　ソースをいじる箇所は、
- 地図のタイトル名
- 立てるマーカーの画像ファイル名
- 地図の中心とする経度・緯度と縮尺
- 呼びこんでくる XML file名
【野鳥の写真サムネイル】ソースHTMLに、地図を表示させるボタンを設置するコードを挿入する。
このボタンをクリックすると、新しいウィンドウを開き【撮影地点地図】を表示する　JavaScript を作成する。このJavaScript は、ひとつの地図につきひとつの　JavaScript が必要であり、【野鳥の写真サムネイル】ソースHTMLと同じフォルダー（サーバー）におき、【野鳥の写真サムネイル】ソースHTMLの<head> 部に JS file を呼びこんでくるコードを挿入する。