地図上に点を打って簡単なポリゴンを作りたい

表題のようなことをしたいなあ、という人はあまりいないかもしれませんが、ここに一人いたので実際にやってみました。

ポリゴンといってもそんな大げさなものではなくて、たとえば大雑把な地図上の地点をクリックしていって経緯度のリストができていれば、それは立派なポリゴンになるわけです。

で、特殊なソフトも入れたくないし、立派な地図も買うほどのものじゃない・・・というときにお役立ちなのが我が国の政府からは利用が制限されているgoogle mapさん。

なにが有用かというと、国内でいうと地図だけならゼンリンさんですが、google mapさん経由で閲覧する以上、プラスアルファがあるわけです。

Google Maps JavaScript API v3 (以下API)が利用できるため、地図とAPIを組み合わせるだけで、目的のものがいともたやすくできてしまいます。

政治上の信念や主張も大切ですが、ここはポリゴンのためです。政府職員でも何でもないわたくしはありがたく使わせていただきましょう。

で、APIなんか使わなくても、もともと特定地点の経緯度は特定の操作をすればすぐわかるようになっています。
ですが、その特定の操作が、連続して経緯度を得るにはちょっと根気がいる作業になってしまうという欠点があります。

そこで、真のプログラマたるもの、楽をしたいならどんな面倒なことでもやる。。。というほどのこともなく、この場合、面倒なことは一切ありません。
ちょっとブラウザ上で動くスクリプトを書けばいいだけで済んでしまいます。APIが整備されているおかげです。

しかも、このAPI、利用するためにgoogleさんに登録の必要がないというすさまじい太っ腹ぶり。シビれますね。
ｺｰﾄﾞを書いたその瞬間からhttpをしゃべるサーバを立てることなく、ﾌﾞﾗｳｻﾞでローカルファイルとして作成したhtmlファイルを表示させてスクリプトを動かすだけで利用できてしまうという点でも助かります。
(「誰でも自由にアクセスできるウェブサイトであれば、無料で利用できるサービスです。」とありますが、さすがにコードを書いてる途中から公開できるわけがなく、ローカルで手軽にテストできるのがうれしいですね)

要点は非常に簡単。それこそその辺のサンプルを拾ってきて(本家のも含めて山ほどあります)、ともかくgoogle mapを表示するってな感じのスクリプトをまずhtmlファイルに追加します。

その時点でもう地図が画面上に表示できているはずです。

アトはもう簡単。クリックされたときに呼ばれるリスナを登録してあげるところだけがミソです。

たとえば

 map = new google.maps.Map(document.getElementById("地図表示領域"), mapOptions);

としてmapオブジェクトを作ってあったとすれば、イベントリスナとして

google.maps.event.addListener(map, 'click', function(event) {
   func(event.latLng );
});

のようにしてあげると（このjava記法ほんとダイキライ。javascriptトカjavaノトキケッキョクツカッチャウケド)、経緯度がfunc()に渡るのであとはどうでも好きにすればいいわけです。
※念のため、funcはAPIじゃないですよ、自分で定義した関数です。

どこをクリックしたのかわかりやすいようにマーカを表示させ、さらにリスナに渡されるオブジェクトのメンバに経緯度が入っているので、それをどこかに用意した要素(たとえばdiv部など)に

document.getElementById("point_list").innerHTML += location.lat() + "," + location.lng() + "<br/>"

のように追加していくだけで十分メタツールになりえます。

ポリゴンが完成したら、その要素からテキストをコピーすればいいわけです。

凝ろうと思えばいくらでも凝れる、一昔前ではまるで夢物語のような高性能アプリの雛形が、回線インフラと膨大な地図データとAPI(とインフレなPC性能)のおかげでたったの数十行でできてしまいます。

まさにネットウラシマを実感する瞬間です。