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の中の人にはお疲れ様と言いたいです。お疲れ様!

スマホで見られる写真地図の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が使える環境でも残念な結果になってしまいました…

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

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

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

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

 

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

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

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

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

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

GoogleMapperバージョンアップ(0.4.0)- 色んなマーカー表示 & AdSense表示 など

久しぶりにGoogleMapper V3をバージョンアップしました。0.4.0です。

つい先日、Google Maps JavaScript API V3でAdSenseの表示ができるようになったので、それに対応した勢いでバージョンアップとなりました。

あと、だいぶ前からサンプルの方では表示していた(サンプルではBeta版を使っているので、気まぐれに機能追加が反映されている)のですが、カラーマーカー(文字を1文字なら表示可能)や、メッセージを表示できる吹出し型マーカーの表示機能も追加しています。
ちなみにカラーマーカーや吹出し型マーカーには、Google Maps APIではなくGoogle Chart APIを使っています。(V2の時からパメラさん作のライブラリで使われてた非公開のやつが正式にChart APIで公開された感じですね。)

あと細い変更としては、Google Maps API V3が早々にStreet Viewに対応したので、それに付随する細い変更も入れてます。(吹き出し表示時の動きとか。)

ちなみに、AdSense表示時にはGoogle MapsのJavaScriptのURLに「libraries=adsense」を追加しないといけないので注意してください!

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

Twitterボットのnorikae_mapで車・歩きでのルート検索

乗り換え案内・ルート検索をしてくれるTwitter Botの@norikae_mapで、車や歩きでのルート検索をできるようにしました。

やり方は、出発地点・目的地の後に、「車」または「歩き」と書くだけです。移動方法を指定しないと、電車での乗り換え案内をリプライします。

具体例はこちらを参考にしてください。

ちなみに台湾から中国本土へ歩こうとすると( @norikae_map 八里郷領港大道 福州平潭県 歩き )、泳いで渡ることになるそうです...

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

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

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

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

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

「ホテル 旅館 × 地図から検索」の地図にストリートビューを表示できるようになりました

ホテル 旅館 × 地図から検索の地図に、Googleマップでおなじみの「ストリートビュー」を表示できるようになりました。

やり方は(本家Googleマップと同じように)地図の左上に表示されている人型のアイコン(ペグマン)をストリートビューを見たい場所にドラッグ&ドロップするだけです。

道順案内機能と合わせれば、目的地までの道順に沿ってストリートビューの写真で風景を確認するなんて使い方もできるかもしれませんね。

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

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との比較という意味でもどうぞ。