2013年5月16日

北九州ドライブ旅行私的観光地図(番号入りマークを表示する)


 いつものように、旅行で訪れた地点をマークで表示する旅行地図を Google Maps API V3 で作成した。前回、和歌山を旅行した時の【初春の南紀私的観光旅行地図】のソースを土台にした。
 ソースは、html と xml のファイルがセットである。html のソースに手を加える部分は、タイトル、地図の中心点・大きさの指示であるが、今回は表示する地点が、14箇所となったので、これらのマークを作成するコードの追加が必要(単純に、元の行の数字を変えるだけであるが)であった。ついでに、マークの色を、オレンジ色に変えた。
また、呼び込んでくる xml ファイル名を指定しなければならない。

 このような新しいマークを作るのは、ICANN というサイトが提供している【Google-Maps markers generator】というページが極めて有用である。
 画面の指示通り、ピン・マークの色を選び、中に表示する数字またはアルファベットを指示して、ダウンロードボタンをクリックすると指定したフォルダーに指示したマーカーの数だけのファイルがダウンロードされる。今回の場合は、例えば、norange_Marker_xx.png というファイルが作成されている。これをFFFTPでサーバーにアップロードして使えばよい。

 単純だか、時間がかかる作業は、訪問地点の経度・緯度、地点名、表示する写真などにリンクするhtml コードをリストする xml ファイルの作成である。
 これも、前回の xml ファイルの内容を変更し、地点数を増やすだけの作業である。入力する経度・緯度の表示は、Google Maps で地点を特定し、地点を右クリックすると現れるポッピアップの「この場所について」をクリックして表示される10進法の数字を使う。私の場合、写真の EXIF に経度・緯度が表示される(カメラにGPSユニットをつけている。)が、これは60進法で、10進法に変換する必要があるので、Google Maps で地点が特定できないときに使っている。

北九州ドライブ旅行地図
  クリックすると地図として機能します。
map_kyusyu.JPG


トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/2807

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)