2007年12月04日
川俣晶の縁側ソフトウェアMagSite1開発日誌 total 4130 count

Google Maps埋め込み機能利用例&チュートリアル・下高井戸駅から東松原駅までの徒歩最短経路の図示

Written By: 川俣 晶連絡先

 MagSite1でのGoogle Maps埋め込み機能利用例を示します。

 京王線下高井戸駅から井の頭線東松原駅までの(推定)徒歩最短経路です。

作り方 §

 単に特定の1つのポイントを指し示す場合。

  1. コンテンツ作成ページを開く
  2. タイトルと本文に適当な文字を入れる
  3. ページ最下部の「GoogleMaps座標ピッカーを開く」をクリックして、地図を開く
  4. 初期状態の表示位置、倍率、モード(地図が航空写真か)を設定する
  5. 「gmp追加」ボタンをクリック (本文末尾にgmpマークアップと表示位置、倍率、モードの値が書き込まれる)
  6. 「確認」ボタンで本文をレンダリングさせて確認

 上記のように、経路を線で結ぶ場合は更に以下の作業を実行

  1. gmpマークアップの後ろに何も書き込まれていない状態(改行もない)を確認し、そこから始める
  2. 「GoogleMaps座標ピッカーを開く」で開いた地図をスクロールさせ、中央マーカーが最初のポイントを示すように設定する (拡大率を上げて行うと正確に位置決めできる)
  3. 「座標追加」ボタンをクリック (名前が"*"でURLの無い座標が1つ追加される)
  4. 以下、スクロールと「座標追加」ボタンのクリックを必要な回数だけ繰り返す
  5. 行頭のgmpのpをlに書き換えてgmlマークアップに直す (線を引かないでポイントだけ示す場合はpを除去してgmマークアップにする)
  6. 最初の座標の"*"を"下高井戸駅"に書き換え
  7. 最後の座標の"*"を"東松原駅"に書き換え
  8. 「確認」ボタンで本文をレンダリングさせて確認

ソース §

 生成されたgmlマークアップのソースは以下の通りです。支援機能の助けがなければ、まず書きたいとは思わない内容でしょう。(本来は1行です)

$$gml ,,35.66599571430267,139.64175045490265,17,r,35.6659957143026

7,139.64175045490265,下高井戸駅,,35.66603929641651,139.6428018808365,*,

,35.666122102367225,139.64326858520508,*,,35.665333263243255,139.64351

534843445,*,,35.66450954998303,139.6442073583603,*,,35.66416524403826,

139.64552700519562,*,,35.66416960235064,139.64818239212036,*,,35.66364

660316676,139.64825749397278,*,,35.66366403652809,139.6497219800949,*,

,35.66382529493989,139.65142786502838,*,,35.66340253570855,139.6515029

668808,*,,35.663411252416324,139.65156733989715,*,,35.66304079149633,1

39.6516478061676,*,,35.66302771637364,139.65207159519195,*,,35.6632761

4333874,139.65369701385498,*,,35.663188976070586,139.6538096666336,*,,

35.66277057185878,139.65399742126465,*,,35.662539576927436,139.6548020

8396912,*,,35.662726987960625,139.6549415588379,東松原駅,

感想 §

 作った本人がこういう感想を述べるのもおかしいですが、本当はもっと面倒になるはずでした。いちいち座標を拾って、膨大な数のパラメータを正しく書く手間は冗談ではないぐらい手間が掛かるはずでした。

 そこで、せめて座標をピックアップするツールだけでも作ろう……と思いました。本来は別個に作るはずでした。しかし、オーサリングページでは確認のために地図を表示できる機能が埋め込まれており、それを活用すればオーサリングページに地図を出すこともすぐできることに気付きました。更に、同じページ上にあれば、ボタン1つで座標を本文に送ることも容易だと気付きました。そうして座標値だけを書き込む機能を作り始めましたが、どうせなら送るときにマークアップの書式を生成してしまえばもっと楽ができると気付きました。最後に、マークアップ作成の他に、座標追加のボタンがあればgml, gmマークアップも容易にポイントを並べられることに気付きました。

 結果として、驚くほど僅かなコードで、驚くほど楽ができる地図オーサリング環境ができてしまいました。もちろん、書き込んだ結果の訂正は面倒であったり、完全とは言えません。しかし、掛けた労力に比して得られた成果は絶大と言えます。文句なく、最大級にコストパフォーマンスに優れたプログラムです。