少し前にGoogle Maps API (v3)にDrawingライブラリが追加されたので、いつか使うときのためのチュートリアル的メモも兼ねて、Drawingライブラリを使って地図上に色んな図形を描けるサンプルを作ってみました。
Google Mapper V3で長方形や円や自由図形や折れ線を描くサンプルです。
いつものように地図の表示にはGoogle Mapper V3を使っていますが、今回はGoogle Mapperはあんまり関係ないです。
サンプルページで描ける図形の種類は下記の通りです。
- 長方形
- 円
- 任意の点を頂点とする多角形 （Polygon）
- 任意の点をつなぐ折れ線 （Polyline）
PolygonとPolylineはGoogle Maps API V2でも編集可能だったのでおなじみです。逆に言うと、やっとV2でできたことがV3でもできるようになったとも言えます。（V2でできてV3でできなかった機能はこれが最後かな？）
Drawingライブラリとしてはこの他にMarkerもサポートしているのですが、Markerは図形とはちょっと違うので今回のサンプルからは除外しました。
Drawingライブラリがやってくれるのは図形の新規追加をしやすくすることだけで、他の編集・削除は自分で書かなくてはいけませんでした。
とはいっても編集はsetEditable()を呼ぶだけ、削除はsetMap()を呼ぶだけなので簡単です。
しかし、１つだけ困ったのはPolygonやPolylineの頂点の削除です。Google Maps API V2でもそうだったのですが、頂点にイベントリスナーを登録できないので、他のものでクリックイベントを拾わなければなりません。
しかも、V2では編集中の頂点に表示される白い四角形で発生したイベントの緯度経度は頂点と同じ値になったのに、V3ではそのような気の利いたことはしてくれないので、閾値を決めてクリックされたのが頂点かどうか判断するような処理を書かなければなりません。（参考：Polygon verteces events – Google Maps JavaScript API v3 | Google グループ）
さらに、IE8では大丈夫なのになぜかIE9では白い四角上のイベントをイベントリスナーが拾ってくれませんでした。
このあたりはそのうちAPIが改良されるような気もしますが、V3ではPolygon・Polylineの編集機能の実装に時間がかかったこと（そしてその背景としてそもそも需要が少ないのではという推測）を考えると、放置されるような気もします。
なにはともあれ、Googleの中の人にはお疲れ様と言いたいです。お疲れ様！