PhoneGap(Cordova) Geolocation API で取得した位置情報で Google Static Maps API を叩く

PhoneGap Cordova

まあ大したことはないです

前回 Geolocation をとってくることができたので、ついでに Google Maps を叩くくらいのことはしたい。というか位置情報とってきたらやっぱり使いたいのは Google Maps ですよね。ということで、PhoneGap(Cordova) というよりは Google Static Maps を使ってみたという話をまとめておく。

Geolocation API で位置情報をとってくる

というのを前回やった
参考::PhoneGap(Cordova) Geolocation API を使おうとしてハマった話 - AtAsAtAmAtArA
そこでつかってる position.coords.longitude と position.coords.latitude ってのが経度と緯度なのでその情報をまるっと使えばいいだけの簡単な話ですね。
ちなみに経緯と緯度がどっちがどっちだかよくわかんなくなくててきとうにデバッグしてたけど、同じような疑問は他の人もあったらしくて下記のような話もある。
参考::Togetter - latitudeとlongitude，どっちが緯度でどっちが経度？
まあ自分も longitude→lng→長い→経度、で覚えると楽かなぁ。ほんとは latlng で緯度経度で覚えたかったけど後述する Google Maps だと緯度経度でつかうので。

蛇足

Android で telnet localhost 5554 で geo fix longitude latitude を設定するけど、そのとき rlwrap というのをいれると便利だった。rlwrap は readline でラップしてくれる便利コマンド。よくあるキーボードショートカットや histroy とかを補完するようなものをやってくれる。Mac で開発しているので brew insatll rlwrap しておいた

rlwrap telnet localhost 5554
geo fix 12.34 43.21

Google Static Maps をたたく

公式ドキュメント読もう。今回も公式をちゃんと読めばいいし、日本語がある。そんなに古くはないらしい(Google App Engine なんかだと日本語ドキュメントは古いから英語を読まないといけないという事情はあるらしい)。
参考::Static Maps API V2 デベロッパー ガイド - Google Maps API — Google Developers
まあ API を叩く URL が用意されていて各種パラメータがあるので、それを img src にいれてやればいいですねってだけの話。ではったが、ちょっと検証には時間がかかった。
最終的な該当部分のコードは以下。jQuery つかってますが、なくても同じですね

var img = $("<img>");
var url = "https://maps.googleapis.com/maps/api/staticmap?size=640x480&maptype=roadmap&sensor=true&zoom=16&language=ja&" +
              "markers="+ position.coords.longitude + "," + position.coords.latitude + "&" +
              "center=" + position.coords.longitude + ","+ position.coords.latitude;
img.attr("src", url);
img.attr("alt", "maps");
img.attr("width", 320);
img.attr("height", 200);
$("#debug").append(img);

img 要素つくる。各種アトリビュート設定する。で、肝心の URL は2種類あって http://maps.google.com/maps/api/staticmap?parameters と https://maps.googleapis.com/maps/api/staticmap?parameters がある。今回は GPS を使うっぽい話なので、いちおう後者にあわせておいた。主に | で区切る部分をURL エンコードが必要とあるから encodeURIComponent をつかうといいのかな？とおもったけどそれだとなんだか動かなかったりしてよくわからなかったので放置してそのままにしておいた。
パラメータはドキュメントを適宜読めば載ってるけど、いちおう列挙しておく。

  • size で大きさ指定。とりあえず 640x640 が最大らしいのでそれっぽくとってきて、後で img 要素自体で縮小している。が、別に最初から 320x200 でもいいかもね。モバイルだとできるだけ通信減らしたいし
  • maptype は地図の種類。道路か航空写真か複合かみたいな。今回は道路で十分なので roadmap に設定
  • GPS をつかうっぽいので sensor は true にしておいた
  • zoom はそのまんまズームの意味。Static Map なのでこの値は適切に設定しないと地図として機能しないので気をつけないといけないかも。とりあえず首都圏の駅まわりを拡大したので 16 にしておいた
  • language は言語。Andorid のエミュレータが英語設定のままのせいか、英語表示だったので強制的に日本語にしておいた
  • markers はピンですね。で、ここに緯度経度を,区切りでいれておく。カラーの変更もできるようだけど、とりあえずデフォルト
  • center がまさに地図の location。ここに緯度経度を , 区切りでいれる。

まあなんてことはないですね。なんてことはないけど、アホなミスとかでいろいろ時間がかかった。merkers の指定や言語設定は以下を参考にした。
参考::Googleマップを画像化してカンタンにサイトへ表示できる「Static Maps API」 - WEBマーケティング ブログ
参考::ノートにメモ書き Google Static Maps API

簡単ですね

検証にちょっと時間がかかったけど、なんてことはないですね。JavaScript 版の埋め込みの Maps だとまた違うのかもしれないけど、それはまた別の機会に。