Google Maps APIを使って2点間の距離を求めたい場合、V2ではGLatLngクラスのdistanceFromというメソッドが用意されていたのですが、V3になってLatLngクラスのメソッドを探してみても、そのようなものは見当たりません。もしかすると自作するしかないのかと思いましたが、リファレンスをよく調べてみると意外なところに見つかりました。
後ろの方にあってわかりにくいのですが、google.maps.geometry.sphericalというクラスにcomputeDistanceBetweenという関数が用意されているのを見つけました。これがdistanceFromと同じ役割を果たします。
V2のときのdistanceFromはGLatLngクラスのメソッドとして動作するものでしたが、V3におけるcomputeDistanceBetweenはgoogle.maps.geometry.sphericalクラスの静的関数として定義されています。つまり、使用にあたってオブジェクトを生成する必要はなく、普通の関数のように使えるということです。ただし名前空間として完全な修飾子を指定しなければならないので、呼び出す際は
google.maps.geometry.spherical.computeDistanceBetween(from ,to);
のように記述します。ここでfromは始点の座標、toは終点の座標を表すLatLngオブジェクトです。結果はメートル単位で返されます。
もう一つ重要なことは、デフォルトではこの関数が含まれるライブラリは取り込まれないので、Google Maps APIをロードする際の引数にgeometryライブラリを追加してやる必要があります。具体的には、
http://maps.google.com/maps/api/js?libraries=geometry&sensor=false
のように、URL引数にlibraries=geometryを追加します。
なおリファレンスには第3の引数として、radiusを指定できるように書かれていますが、これは地球の半径のことです。省略した場合は赤道半径の6378137mが使用されます。通常はそれで問題ありませんが、地球を球体と仮定して計算しているため、約0.3%の誤差が生じるとされています。極に近づくほど誤差が大きくなるため、より正確な値を求めたい場合は、地球の半径を回転楕円体近似で緯度の関数として求め、それをradiusに指定してやればよいわけです。
実際に試していただくため、簡単なサンプルを作成しました。主要部分のソースを以下に示します。
function initialize() { var numMarkers = 0; var mapOptions = { zoom: 14, center: new google.maps.LatLng(34.681215, 135.819577), draggableCursor: 'crosshair', scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("maparea"), mapOptions); var marker1 = new google.maps.Marker({}); var marker2 = new google.maps.Marker({}); google.maps.event.addListener(map, "click", function(event) { numMarkers++; if (numMarkers % 2) { // クリック数が奇数のとき marker1.setPosition(event.latLng); marker1.setMap(map); marker2.setMap(null); document.getElementById("distance").innerHTML = "0.000km"; } else { // クリック数が偶数のとき marker2.setPosition(event.latLng); marker2.setMap(map); var from = marker1.getPosition(); // 始点の座標 var to = marker2.getPosition(); // 終点の座標 // 2点間の距離を求める(単位はキロメートル) var distance = google.maps.geometry.spherical.computeDistanceBetween(from, to) / 1000; document.getElementById("distance").innerHTML = distance.toFixed(3) + "km"; numMarkers = 0; } }); }
このサンプルでは地図上をクリックするとマーカーを表示し、2点ごとにその間の距離を求めて表示するようになっています。重要な部分にはコメントを入れましたので、参考にして下さい。
GoogleMaps APIの利用条件が変更されたため、サンプルは廃止しました。APIキーを登録して支払を有効にしないと動きません。
このライブラリには他にも、与えられた経路に沿って距離を求めるcomputeLengthという便利な関数も用意されていますので、リファレンスを参照してみて下さい。
コメント
[…] 調べても事例が少なく困っていました。 唯一見つけたのが、「Google Maps API V3で距離を求める方法 | ロジカルアーツ研究所」。 これがめちゃくちゃ参考になり、なんとか解決できました […]
[…] 唯一見つけたのが、「Google Maps API V3で距離を求める方法 | ロジカルアーツ研究所」。 これがめちゃくちゃ参考になり、なんとか解決できました。 […]
[…] https://www.logical-arts.jp/archives/226 […]