Yahoo地図とかGoogleマップあたりが候補にあがるのだが、情報量も多いGoogleマップに落ち着いた。Googleマップは有料のビジネスプランも存在しており、使用方法は注意が必要。例えば、有料会員しか見えないページでしかGoogleマップを使った機能にアクセス出来ない等はビジネスプランの購入が必要。一方、オープンなページで利用できる機能なら無料プランで良いらしい。
無料で使いたいので最近放置していたDataNowに乗せよう（笑）
それで、動かせるようにしたものが次のリンク。
Googleマップで緯度経度を確認できる。
まだ、機能は少なくて次の２つだけ。
- 地図の中央の緯度、経度を表示
- 入力した緯度、経度に移動
でも、こんなリッチなマップを誰でも自分のサイトに入れれるなんて便利な時代になったねぇ。
Googleマップの中央にアイコン画像出すならCSSが良い
ただ、地図、中央にアイコンを表示するのにちょっと手こずった。rails5でcoffeescript使ったせいで普通のjsと違ったところもあるかもしれないけど、Markerオブジェクトにiconで自分の作った画像入れると、coffeescriptのコンパイルがうまくいかなかった。。hashオプションの初期化を1回じゃなくて、１つずつセットする方法だとコンパイルして画面表示まで出来たのだが、アイコンが中央からずれる不具合が出た。調べてみると、CSSの関係でそういうことが起きたりするらしい。。辛い。
Stackoverflowにあった「Is there a way to Fix a Google Maps Marker to the Center of its Map always?」をみて、CSSで実装した。JSでやるよりサクサク動くし、別に表示以外するつもりないし、こっちの方がいいや。
cssはこんな感じ。(実装はsassでやってる)。
// google mapは高さを付けないと表示されない。
#map {
width: 100%;
height: 400px;
border: 2px #808080 solid;
}
// マーカーはcssで実装する。（jsでやるとcenterちゃんと取れなかった。）
#map:after {
width: 60px;
height: 60px;
position: absolute;
top: 50%; left: 50%;
background: image-url("ic_map_center.png") no-repeat;
pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
background-size: 60px 60px;
content: ' ';
margin: -30px 0 0 -30px;
}
完璧！
緯度、経度から距離を求めるjsライブラリGeolib使ってみよう
次は、緯度、経度から距離も表示しようと思った。
ただ、緯度、経度の距離って結構面倒くさい。。なにより、緯度によって、経度の１度の距離が変わってしまうから。（参考： 緯度経度1度の距離、 経度1秒は何メートル？ ）
地図は60進数を使って「北緯35度39分30」のように表す時がある。Googleマップ等は小数点以下を全部10進数を利用するのでその辺の考え方ややこしい。
なんで60進数なんて使うんじゃい！と思ってググったら興味深いこと書いてあった。
それははるか昔、円を360度としたのは、約5000年前のメソポタミアのバビロニア人でした。彼らは月と太陽の動きから60進法を考案して、地球が１日で太陽の周りを回転する角度を１度とし、地球が太陽の周りを一周する一年は360日と決めたので、円一周が360度となったのです。
なる～。
話を戻すと、緯度、経度の距離計算がしたいと思いまして、自分でやるの少し面倒そうなのでライブラリを探しました。
Geolib が良さそう。MITライセンスだし、Star 1000以上付いてるしきっと大丈夫。
今度これを使ってみる。
