2016年1月のGoogle Codeの閉鎖に備えて、Google Codeに載せていたJavaScript・CSSのファイルをGitHubへ移行しました。
内部的に他のGoogle Codeのライブラリを使っていたり参考サイトとして記載していたGoogle Mapper V3については、その部分も修正し、リンク先の移転等もきれいに直しました。
また、游ゴシックで小さな文字が見づらくなっていたTodo.phpについては、ついでにstyleも微修正して、GitHubに移行しました。
フリーでオープンソースなJavaScriptやPHPのツールや、サービスの更新記録など
2016年1月のGoogle Codeの閉鎖に備えて、Google Codeに載せていたJavaScript・CSSのファイルをGitHubへ移行しました。
内部的に他のGoogle Codeのライブラリを使っていたり参考サイトとして記載していたGoogle Mapper V3については、その部分も修正し、リンク先の移転等もきれいに直しました。
また、游ゴシックで小さな文字が見づらくなっていたTodo.phpについては、ついでにstyleも微修正して、GitHubに移行しました。
少し前にGoogle Maps API (v3)にDrawingライブラリが追加されたので、いつか使うときのためのチュートリアル的メモも兼ねて、Drawingライブラリを使って地図上に色んな図形を描けるサンプルを作ってみました。
Google Mapper V3で長方形や円や自由図形や折れ線を描くサンプルです。
いつものように地図の表示にはGoogle Mapper V3を使っていますが、今回はGoogle Mapperはあんまり関係ないです。
サンプルページで描ける図形の種類は下記の通りです。
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をバージョンアップしました。バージョン0.7.0です。
変更点は、Geolocation APIを使って現在位置を取得できるようにしたことです。
要するにnavigator.geolocation.getCurrentPosition()を呼び出すというのが主な処理なのですが、その前後の面倒そうなことも合わせてやるので、呼び出す側は楽になります。
まあ、どちらかと言えば、Geolocation APIの使い方の覚え書きという側面が強いかも…
主にスマートフォンで使われる機能ですが、PCでも無線LANのあるノートPC等ならまあまあ使えます。(古いIEは使えません。新しいIEは…使えるのですが…残念です。)
でもiPhoneだとgetCurrentPosition()だけでなく、watchPosition()とか使ったりしないとうまく取得できなくてタイムアウトしているようですが、とりあえず今回はそこまで追ってません。
東京+通勤+道中に続くスマートフォン向けの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を微修正したました。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です。
下記の機能が追加されました。
その他の主な変更点は下記の通りです。
ホテル 旅館 × 地図から検索に新機能の追加です。
ホテルを表示しているページ(たとえばこれとか)で、地図の左上に「この近くのスポットを表示する」というボタンが表示されるようになりました。
このボタンをクリックすると、その地図内の色々なスポット(レストラン、ショップ、観光名所、寺社、公的施設、etc…)がそれぞれのアイコンで表示されます。
アイコンをクリックすると、写真等が載っているさらに詳細な説明ページへのリンクが表示されます。
地図を移動・拡大・縮小てから再度「この近くのスポットを表示する」ボタンをクリックすれば、またその表示範囲のスポットを表示できます。色々試してみてください!
ちなみに表示されるデータはGoogle Palcesに登録されているデータです。Google Maps APIを通じて取得・表示しています。
天気速報(予報じゃなくて速報だよ) Tweets on the Mapを作りました。Twitter上でつぶやかれた天気に関するTweetを地図上にマッピングして表示します。
地図を移動すると、どんどんお天気アイコンが増えていくので試してみてください。
もうすぐ梅雨なのでお天気のチェックに、あるいはゲリラ豪雨のチェックに、使ってみてはいかがですか?
(Tweetの内容が天気と関係しないことも少なくないのは、ご愛嬌ということで...)
Google Maps API V3を使ってお手軽に地図を表示するJavaScriptライブラリ、 Google Mapper V3をバージョンアップしました。0.5.0です。
主な変更点は下記のとおりです。(一部、前バージョンと互換性が無いので注意してください。)
今回は0.5という区切りにふさわしく(?)、重要なパーツを多く含むバージョンアップとなりました。
Google Maps APIに興味のある方は、どうぞGoogle Mapper V3をいじってみてください。