どーも、青山です。
前回はMySQLについて記事を書いたのですが、今回はJavascriptというか
Google Maps API v3ネタです。
Google Maps APIネタなんて、検索すればサンプルが一杯出てきますし
今更な感じがするのですが、サンプル以外のことをしようとすると意外に
はまったりします。
今回取り上げるのは、1年以上前に追加されたPlaceライブラリについて
です。Google Maps APIのライブラリについてはこちらを参照して下さい。
Placeライブラリを使って、アライドアーキテクツ周辺のコンビニを検索して
結果を直線距離で近い順にリスト表示させるサンプルを作ってみます。
ちなみに、Placeライブラリの説明は公式の日本語訳ページがあります。
うれしいですね。
サンプル作成で一番はまったのが、近い順に結果を取得する部分です。
上記の日本語訳ページには、説明が全くありません。
でも、原文のページを読むと日本語訳に無い説明が…。
rankBy (optional) — Specifies the order in which results are listed. Possible values are:
google.maps.places.RankBy.DISTANCE. This option sorts results in ascending order by their distance from the specified location (required). Ranking results by distance will set a fixed search radius of 50km. A custom radius and/or bounds is not supported in conjunction with RankBy.DISTANCE. When distance is specified, one or more of keyword, name, or types is required.
落ち着いて読んだら、ちゃんと書いてある事に気づいたのですが、距離順（RankBy.DISTANCE）で
検索結果を取得する場合、検索範囲が半径50kmに固定されているんですね。
そのため、メートル単位で指定できる半径の検索オプション（radius）は距離順（RankBy.DISTANCE）を使う場合には指定できないんです。ってちゃんと書いてあるんですが、よく読まないで、はまりました…。
それで、設定した検索条件が下記のものです。
（ソース一部抜粋）
|
1 2 3 4 5 6 7 |
var request = { //keyword: 'ローソン', location: gmapTest.myLatlng, //radius: '250', types: ['convenience_store'], rankBy: google.maps.places.RankBy.DISTANCE }; |
「location」 はアライドアーキテクツの位置情報を指定しています。
「kyeword」 でも検索できるのですが、今回は指定していません。
「types」 は配列で複数指定できるもので、コンビニや駅などを指定できます。
一覧はこちらを参照してね。
そんなこんなで、近くのコンビニを一覧表示して、そこまでの直線距離を表示して、
コンビニ名をクリックすると、徒歩ルートと距離が表示されるサンプルが出来ました。
（省略し過ぎ？）
興味があって、お暇な人は、ソースを右クリックして表示させてみてください。
Googleの情報が古いせいか、サンクスの次に近いセブンイレブンが
検索結果に出て来ていませんが、徒歩500m以内にコンビニがいっぱいですね。
ちなみに、私はサンクス派です。だって近いんですもの。
そんな、コンビニが近くにあって便利なアライドアーキテクツでは
ただいま、エンジニアを募集しています。
エンジニア採用サイトはこちらをご覧ください！
ご応募おまちしております！
受託案件を担当しています。 Javascript, Wordpressなどテーマはその時々で変わりますが、役に立つ情報を提供できればと思います。
