これって、単純そうな感じがしますよね。緯度、経度取得してピン立ててくだけやん!住所を緯度、経度に変換すりゃカンタンやん!って。でも、緯度経度取得しながらピン立ててくと多分10件くらいしかできないから!ってね、そういう発想しないですよね、普通。僕はしましたけどね。住所→緯度経度→MAPってやると多分ダメなので、住所→緯度経度→DB DB→緯度経度→MAPって流れ出やると上手く行きます。面倒ですけどね。

やること


住所から緯度と経度を取得する手法をジオコーディングと言います。逆に緯度と経度から住所を取得する方法を逆ジオコーディングと言います。今回は、ジオコーディングして緯度と経度をDBに保存して、保存した緯度と経度のグーグルマップ上にピンを立てるという事をやります。

緯度と経度ってなあに?


latlng

緯度と経度っていうのは凄まじく雑な説明をすると、横の線と縦の線です。横の線は赤道を基準として南北へ180度、縦の線はグリニッジ天文台跡を通る南北への線を基準として東西へ180度まで表しています。英語ではlatitude、longitudeって名前でデータで使う場合にはlat(緯度),lng(経度)で使われることが多いように個人的に思います。日本国内で値取得する場合は、35.178217(緯度), 136.909375(経度)みたいな形で、経度の値が大きくなるし、並べると、経度のほうが文字数多くて長くなることが多いです。なので、でかくて長い方が経度だって覚えておくと便利です。そうするとデータ返ってきた時にlatってどっちだっけってなった時に、あ、字数少ないから緯度だなってなります。

ジオコーディング素際に用意するもの


緯度と経度から住所を取得することをジオコーディグといいます。ジオコーディングを自前で用意するには、技術力だけでなく手間暇が超かかるので、ここはGoogleのAPIを使います。さらに、GoogleAPIをより使いやすくする為にGmaps.jsを使います。ついでにjQueryも読み込みますと、JSの読み込みはこんな感じになります。

住所から緯度、経度を取得する1


想定としては、MySQLの検索結果をジオコーディングしたいので、phpを使って、MySQLの結果を呼び出すのが妥当なのかなと思ってます。なので流れとしてjQueryのajaxメソッドでphpを動かしてデータを得る為にコードを書きます。

データは配列で用意しました。ajaxメソッドは結果を一度変数に受けて、後でajaxイベント(susccessなど)のメソッドを呼ぶのが個人的に使いやすいと思ってるのでこういう使い方をしてます。別にパラメータのオブジェクトん中で書いてもおkです。

住所から緯度、経度を取得する2


続いて、取得した住所から緯度、経度を取得していきます。ここは、データをjQueryオブジェクトに入れてeachメソッドでおらーって取得したいところですが、データが10件しか取得できず無事死亡しました。

だいたいこういうAPIには1秒間に対して1リクエストっていう取り決めがあるらしいので、setintervalとかで、1秒ずつ回していくという方法を取ります。
というわけで住所から、緯度と経度を取得してみましょう。

GMaps.geocodeメソッドを使って緯度、経度を取得していきます。clearIntervalをしないと、永遠に回り続けるので、取得したデータが切れるくらいで止めてやるのが良いと思います。
こうやって取得したデータを、CSVに一回落としてその後クエリを作るなり、そのままぶち込むなりを、geocodeメソッドのコールバック関数内でajaxメソッド呼んでやると良いんではないかと思います。

出力


データの入力が終わったら、データをまたajaxで取得します。取得したらGMapsメソッドに初期値を設定して、取得したデータをsetintervalせずに、eachでループしながらaddMarkerメソッドでピンを立てていきます。そしたら地図が見事に出来上がるはずです。出来上がった地図の見栄えを変更するには、setOptionsメソッドを使います。ただ、この辺よく分からずにコピペした程度の知識なので、参考サイトをいくつか貼っておきます。ちなみにこのオプションを設定すると、建物名や施設の詳細が消えます。通りの名前や駅の名前は生きているという、大雑把だけど分かりやすい地図だと個人的には思います。

setOptions参考にした記事


GoogleMapをかっこ良くする!カスタマイズ方法

これが個人的に丁寧でかつ分かりやすかった気がします。

Googleマップをちょっとカッコよくカスタマイズ!

パラメータの説明まで載ってる。

Google Maps JavaScript API 英語

雰囲気で。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事