2008年8月11日(月)GoogleMaps で線分の距離を測ろう！

GoogleMaps 埋め込みフィールドはこれで動いています

GoogleMaps 埋め込みフィールドを利用したサンプルをいくつかみてみましょう。

Google マップの地図があると場所が分かりやすくていいですね。

そこで、CMONOS.JP の GoogleMaps 埋め込みフィールドで使われている gmap.js を公開しました。ライセンスは MIT ライセンスです(Google の提供するAPI部分を除く)。

Google マップの「このページのリンク」をクリックするとサイトに地図を埋め込むための <iframe> タグが表示されますから、通常はこちらを利用した方が手軽かもしれません。

gmap.js には、線分の距離を計算したり、呼びだし元ページのフォームに経度緯度情報を書き込んだりできるなど、便利な機能がいくつかありますので、よろしければどうぞお使いくださいm(_ _)m。

↑こんなかんじで kml の線分の距離を表示することができるスクリプトです。

新バージョンを公開しました。

テーブルメーカーでは、このスクリプトを利用して CGI から書き出した KML を表示することができます。

ブログのインデックスでもこのスクリプトの新機能が利用されています。

地図を利用したインデックスのサンプル。地図のある記事へのリンクにマウスを重ねると、該当するポイントの情報ウィンドウが開きます。

新バージョンを公開しました。

新バージョンを公開しました。

新バージョンを公開しました。

埋め込み GoogleMaps のストリートビュー表示で、画面がちらついて操作を受け付けなくなっていた不具合を修正しました。
ユーザーが作成したマーカー画像を使用できるようになりました。
ストリートビュー表示で、ストリートビュー内の移動に地図が連動するようになりました。既知の問題として、ストリートビュー情報ウィンドウを最大化した状態で移動すると、情報ウィンドウサイズは変化しないものの最大化扱いが解除されてしまう問題があります。解決方法がわかり次第対処する予定です。

オリジナルマーカーを指定できるようになりました。

新バージョンを公開しました。

新バージョンを公開しました。

プレースマーカーリストを指定された id の <ul> または <ol> に書き出すオプションを追加しました。
指定された呼び出し元 URL とマーカーの atom:id または atom:link が一致するとき自動的に情報ウィンドウを開くようになりました。
表示位置を変更したときマーカーが消えることがある不具合を修正しました。
ストリートビューウィンドウを最大化している状態でストリートビュー内を移動したとき、最大化を解除するようにしました。最大化したまま移動すると表示が崩れるためです。

新バージョンを公開しました。Google Maps API v3 に対応しました。

Google Maps API v3 対応版の既知の問題点

概観地図が未実装です。ただし概観地図に関しては将来的に復活する可能性があります。そのため CMONOS.JP の概観地図設定はそのまま残してあります。明確に廃止された場合は、CMONOS.JP からも概観地図設定を取り除く予定です。概観地図は復活しました。
IE6 で、ストリートビューの見る方向を動かすと、視点を表す人型アイコンが消えてしまいます。IE6 は Google からサポート対象外とされつつありますので、この問題は今後も解決されないかもされません。
Safari で、ストリートビューの画面をドラッグすると、背景画像がドラッグされてしまい、見る方向を期待通りに変更できない問題が発生します。ボタンを使うと正常に動かすことができます。これは CMONOS.JP では、ストリートビューを情報ウィンドウ内で表示するためと思われます。最新の Safari ではこの問題は発生しません。