Google CodeからGithubへ移行

2016年1月のGoogle Codeの閉鎖に備えて、Google Codeに載せていたJavaScript・CSSのファイルをGitHubへ移行しました。

内部的に他のGoogle Codeのライブラリを使っていたり参考サイトとして記載していたGoogle Mapper V3については、その部分も修正し、リンク先の移転等もきれいに直しました。

また、游ゴシックで小さな文字が見づらくなっていたTodo.phpについては、ついでにstyleも微修正して、GitHubに移行しました。

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を通じて取得・表示しています。

好きなキーワードで検索したTweetを地図上に表示する「なんでも速報」を作りました

昨日の天気速報に続いて、今度は天気だけでなく好きなキーワードでTwitterからつぶやきを検索し、地図上にマッピングして表示するなんでも速報 Tweets on the Mapを作りました。

中身は天気速報からの流用ですが。

こんなキーワードで検索すると面白いかも...?

 

天気に関するTweetを地図上に表示する「天気速報」オープン

天気速報(予報じゃなくて速報だよ) Tweets on the Mapを作りました。Twitter上でつぶやかれた天気に関するTweetを地図上にマッピングして表示します。

地図を移動すると、どんどんお天気アイコンが増えていくので試してみてください。

もうすぐ梅雨なのでお天気のチェックに、あるいはゲリラ豪雨のチェックに、使ってみてはいかがですか?

(Tweetの内容が天気と関係しないことも少なくないのは、ご愛嬌ということで...)

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

Google Maps API V3を使ってお手軽に地図を表示するJavaScriptライブラリ、 Google Mapper V3をバージョンアップしました。0.5.0です。

主な変更点は下記のとおりです。(一部、前バージョンと互換性が無いので注意してください。)

  • load()によりGoogle Maps APIのJavaScriptを手軽に読み込めるようにした。(もうURLを調べなくてもいいよ。)
    load()を使うと、表示しているWebページがhttps(SSLにより暗号化されている)の場合は、Google Maps APIのJavaScriptもhttps版を取得する。
    また、load()はAdSense等の追加ライブラリにも対応している。
  • OverviewMapControl(地図の右下に表示される縮小地図)が表示されるようになった。
    それにともない、showOkinawa()で表示する沖縄のミニ地図はOverviewMapControlの上の位置に移動した。
  • setStreetView()を追加した。デフォルトではストリートビューの写真は地図上に表示されるのでストリートビューを表示している間は地図が非表示になるが、setStreetView()を使えば手軽に地図とストリートビューを並べて表示することができる。
  • addMarker()で追加したMarkerを配列で保持するようにして、getMarkerIndex()で配列内Indexの取得、removeMaker()でMarkerの削除ができるようにした。(Markerの管理が容易になった。)
  • Markerの独自拡張(openInfoWindow()を追加していた)をやめて、代わりにMarkerの吹き出しを開くopenMarkerWindow()を追加した。
  • Markerの吹き出しの内容を取得するための関数名を、getInfo()からgetMarkerInfo()に変更した。
  • ジオコーディングのコールバック関数をsearchCallback()から無名関数に変更した。
  • ジオコーディング後には該当の場所に吹き出しを表示するようにした。

 

今回は0.5という区切りにふさわしく(?)、重要なパーツを多く含むバージョンアップとなりました。
Google Maps APIに興味のある方は、どうぞGoogle Mapper V3をいじってみてください。