Google Maps APIで図形を描くサンプルを追加

少し前にGoogle Maps API (v3)にDrawingライブラリが追加されたので、いつか使うときのためのチュートリアル的メモも兼ねて、Drawingライブラリを使って地図上に色んな図形を描けるサンプルを作ってみました。

Google Mapper V3で長方形や円や自由図形や折れ線を描くサンプルです。

いつものように地図の表示にはGoogle Mapper V3を使っていますが、今回はGoogle Mapperはあんまり関係ないです。

サンプルページで描ける図形の種類は下記の通りです。

  • 長方形
  • 任意の点を頂点とする多角形 (Polygon)
  • 任意の点をつなぐ折れ線 (Polyline)

PolygonとPolylineはGoogle Maps API V2でも編集可能だったのでおなじみです。逆に言うと、やっとV2でできたことがV3でもできるようになったとも言えます。(V2でできてV3でできなかった機能はこれが最後かな?)
Drawingライブラリとしてはこの他にMarkerもサポートしているのですが、Markerは図形とはちょっと違うので今回のサンプルからは除外しました。

Drawingライブラリがやってくれるのは図形の新規追加をしやすくすることだけで、他の編集・削除は自分で書かなくてはいけませんでした。
とはいっても編集はsetEditable()を呼ぶだけ、削除はsetMap()を呼ぶだけなので簡単です。

しかし、1つだけ困ったのはPolygonやPolylineの頂点の削除です。Google Maps API V2でもそうだったのですが、頂点にイベントリスナーを登録できないので、他のものでクリックイベントを拾わなければなりません。
しかも、V2では編集中の頂点に表示される白い四角形で発生したイベントの緯度経度は頂点と同じ値になったのに、V3ではそのような気の利いたことはしてくれないので、閾値を決めてクリックされたのが頂点かどうか判断するような処理を書かなければなりません。(参考:Polygon verteces events – Google Maps JavaScript API v3 | Google グループ
さらに、IE8では大丈夫なのになぜかIE9では白い四角上のイベントをイベントリスナーが拾ってくれませんでした
このあたりはそのうちAPIが改良されるような気もしますが、V3ではPolygon・Polylineの編集機能の実装に時間がかかったこと(そしてその背景としてそもそも需要が少ないのではという推測)を考えると、放置されるような気もします。

なにはともあれ、Googleの中の人にはお疲れ様と言いたいです。お疲れ様!

Google Mapper V3に現在位置取得機能を追加しました

Google Mapper V3をバージョンアップしました。バージョン0.7.0です。

変更点は、Geolocation APIを使って現在位置を取得できるようにしたことです。
要するにnavigator.geolocation.getCurrentPosition()を呼び出すというのが主な処理なのですが、その前後の面倒そうなことも合わせてやるので、呼び出す側は楽になります。
まあ、どちらかと言えば、Geolocation APIの使い方の覚え書きという側面が強いかも…

主にスマートフォンで使われる機能ですが、PCでも無線LANのあるノートPC等ならまあまあ使えます。(古いIEは使えません。新しいIEは…使えるのですが…残念です。)

でもiPhoneだとgetCurrentPosition()だけでなく、watchPosition()とか使ったりしないとうまく取得できなくてタイムアウトしているようですが、とりあえず今回はそこまで追ってません。

スマホで見られる写真地図のFlic 100K(ふりく百景)を作りました

東京+通勤+道中に続くスマートフォン向けのWebサイトとして、今自分がいる場所の近くで撮影された美しい写真を地図上にマッピングして表示するFlic 100K (ふりく百景)を作りました。
(分かりにくかもしれませんが、「富嶽百景」とかけています…)

位置情報を取得できなかった場合は、外国の方が喜びそうな金閣寺周辺の写真を表示するようにしました。
Androidでは大丈夫なのですが、iPhoneだとGPSやWi-Fiからの位置情報取得がタイムアウトして金閣寺が表示されることが多いようです。SafariのGeolocation APIの問題かもしれません。

技術的には、今回もjQuery Mobileを使いました。ページ遷移が無いので見た目をそれっぽくするために使っただけですが。
一点、listviewのdividerへのテーマの反映が期待通りに動かなかったのが残念です。黄色にしたかったです。jQuery Mobileは現在RC2ですが、正式版リリースまでには直るといいですね。

Flickr APIはPHPのserialized形式があってPHPに優しいのですが、Twitter APIのようにKEYなしでSearchができたらJavaScriptだけで済んだのでもっとよかったのにと思いました。
まあKEYを公開してJavaScriptでアクセウするような参考ページもたくさんありますが。(Flickr APIの規約としてはKEYの公開は禁止しています。)

Google Mapper V3をちょっとバージョンアップ(0.6.1)

Google Mapper V3を微修正したました。IEで動かないバグの修正と、load()でGoolge Maps APIのJavaScriptを読み込む場合に位置情報使用有無のパラメータであるsensorを指定できるようにしました。

で、このsensorとtrueにすると、ブラウザが対応していればユーザーの位置情報が取得できます。(Firefoxはデフォルトでは許可を求めてきます。Androidでは設定で位置情報を使えるようにしておく必要があります。)
スマートフォン向けの地図表示などでは需要があるのではないでしょうか。

で、試しに、Google Mapper V3で現在地を取得する動作サンプルを作ってみました。
スマートフォンでGPSを使えばもちろんかなり正確な場所が分かりますが、GPSを使わなくてもGeolocation APIは無線LAN等からある程度場所を特定できます。ノートPCとFirefoxの組み合わせでも、意外に正確な場所が取得できました。興味のある方は上記のサンプルで試してみてください。
(無線LANの使えないPCなどではかなり残念な結果になります…。)

追記:IE(9)では無線LANが使える環境でも残念な結果になってしまいました…

Google Mapper V3 バージョンアップ(0.6.0)

Google Mapper V3をバージョンアップしました。0.6.0です。

下記の機能が追加されました。

  • Placesライブラリを使って地図上にレストラン・ホテル・公共施設等さまざまなスポットを表示するshowPlaces()
    (クリックするとスポットの詳細ページへのリンクを表示します。ちょっと工夫するとホテル 旅館 × 地図から検索のように、宿泊施設だけは表示しないでその他のスポットのみ表示する、なんてこともできます。)
  • Placesライブラリを使って検索窓にサジェスト能力を与えるsetAutocomplete()
  • Markerをすべて削除するremoveAllMarkers()
  • HTMLエスケープをするescape()
  • ブラウザにJavaScriptコンソールがある場合のみコンソールにログを表示するlog()

 

その他の主な変更点は下記の通りです。

  • 吹き出し(InfoWindow)を1つしか使わないようにした(1つのInfoWindowを移動したり非表示にしたりして使いまわす)
  • load()で読み込むGoogle MapsのJavaScriptのドメインをmaps.googleapis.comに変更
  • show()にオプションパラメータを渡せるようにした
  • デフォルトでコンビニ等を表示するようにした
  • 吹き出し型Markerの位置を調整
  • search()で1件ヒットしたときにズームするようにした
  • search()のヒット件数の閾値をメンバ変数から直書きに変更
  • Google Maps APIのDirections関連の定数名の仕様変更に対応

 

「ホテル 旅館 × 地図から検索」でホテルの近くのレストランや観光スポットが表示できるようになりました

に新機能の追加です。

 

ホテルを表示しているページ(たとえばこれとか)で、地図の左上に「この近くのスポットを表示する」というボタンが表示されるようになりました。

このボタンをクリックすると、その地図内の色々なスポット(レストラン、ショップ、観光名所、寺社、公的施設、etc…)がそれぞれのアイコンで表示されます。

アイコンをクリックすると、写真等が載っているさらに詳細な説明ページへのリンクが表示されます。

地図を移動・拡大・縮小てから再度「この近くのスポットを表示する」ボタンをクリックすれば、またその表示範囲のスポットを表示できます。色々試してみてください!

 

ちなみに表示されるデータはGoogle Palcesに登録されているデータです。Google Maps APIを通じて取得・表示しています。

「ホテル 旅館 × 地図から検索」の道順案内で、出発地点・目的地や途中の経路をドラッグ&ドロップで移動できるようになりました

ホテル 旅館 × 地図から検索の道順案内で、出発地点・目的地や途中の経路をドラッグ&ドロップで移動できるようになりました。

道順案内はホテル検索後のマップで地図上の適当なところをクリックするとできます。試しに京都駅の地図で適当な所をクリックしてみてください。そこが出発地点になります。
吹き出しが表示されたら「車の場合」か「歩きの場合」のどちらかをクリックし、目的地をクリックしてください。目的地はホテルのアイコンでもOKです。
すると道順案内が表示されます。
出発地点には「A」のピンが、目的地には「B」のピンが表示されていますが、これは両方ともドラッグ&ドロップで移動できます。
さらに、ピンとピンの間の途中の経路の適当な所をドラッグ&ドロップすると、経路を変更することもできます。

ホテル探しのおともにどうぞ。

ホテル 旅館 × 地図から検索

Google Mapper V2のシンプルな動作サンプルを追加した

Google Maps API V2に対応したGoogle Mapper V2は、これまで動作サンプル的なものとしてJapan Aquaria Map and Photosものすごい地図へのリンクを貼っておいたが、これらはサンプルとしてはいろいろ付加的なものがついていてGoogle Mapper V2自体を知るには少し分かりづらいかと思った。

そこで、シンプルな動作サンプルとして新たにGoogle Mapper (V2) 動作サンプルを追加した。

まあ時代はもうGoogle Maps API V3で、今更な感はあるけど、V3との比較という意味でもどうぞ。

GoogleMapper V2とV3をそれぞれバージョンアップした

Google Mapsをほどよくカスタマイズしてお手軽に表示 – Google Mapper [ゼロと無限の間に] (V2)

Google Maps API V3を使って地図をお手軽に表示 – Google Mapper V3 [ゼロと無限の間に]

V2(0.2.1)の主な変更点

  • addMarker()のパラメータの順番を逆にした
  • GoogleMapper.custom.getInfoHtml()で何も取得できない場合はMarkerをクリックしても吹き出しを表示しないようにした

V3(0.3.2)の主な変更点

  • GoogleMapper.direct()の第2引数(移動手段)をフラグから文字列に変更(移動手段に「自転車」が追加されたことに対応した。今は日本では「自転車」でルート検索はできないけど)
  • ルート検索(道順検索)中はパネルに「データを取得しています しばらくお待ちください」と表示するようにした
  • ジオコーディング/逆ジオコーディングによる住所取得の際に郵便番号を無視するようにした
  • ジオコーディング後にテキストボックスにフォーカスを当てるようにした
  • Google Maps API V3 Betaの仕様変更に対応した