Follow Us.RSS

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

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

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

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

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

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

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

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

2008年12月16日追記

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

  • ストリートビューの表示に対応しました。
  • Safari1.x でアクセスしたときにクラッシュしなくなりました。
  • CGI などと連携するための機能が強化されました。
  • 情報ウィンドウ内リンクをどのウィンドウで開くか指定できるようになりました。

今すぐダウンロード

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

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

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

2009年9月19日追記

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

  • ストリートビューの視点を表す人型アイコンが表示されなくなっていた不具合を修正しました。

今すぐダウンロード

2009年10月8日追記

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

  • API のアップデートにより、ストリートビューが期待通り動作しなくなっていた不具合を修正しました。
  • ストリートビュー内の移動に対応しました。

今すぐダウンロード

2009年12月7日追記

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

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

今すぐダウンロード

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

2010年3月15日追記

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

  • Googleマップのストリートビュー表示を調整しました。情報ウィンドウを最大化したときに描画サイズがウィンドウサイズに合わなくなっていた不具合を修正しました。

今すぐダウンロード

2010年4月20日追記

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

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

今すぐダウンロード

2010年9月14日追記

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

  • API キーを取得する必要が無くなりました。
  • ストリートビューの操作がわかりやすくなりました。
  • 同時に複数の情報ウィンドウを開けるようになりました。

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

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

今すぐダウンロード【Google Maps API v3 版】

ストリートビューの操作がわかりやすくなりました。

2012年5月5日追記

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

  • 復活した概観地図に対応しました。
  • ストリートビューのペグマンをドラッグしにくくなっていた不具合を修正しました。

今すぐダウンロード【Google Maps API v3 版】

2013年7月11日追記

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

  • KML 中の線分の座標に標高データがある場合、標高差を線分の距離の計算に加えるようにしました。

今すぐダウンロード【Google Maps API v3 版】

コメント

トラックバック

関連記事

[画像]

CMONOS.JP | 開発者ブログ | PayPal ってこんなにすごい!

2009年12月7日 ...API 信用証明書は、PayPal の「個人設定」「アカウント情報」「API アクセス」から取得 できます。 APIアクセスの画面. 「APIアクセス」画面。「オプション 2- API 信用証明書を 請求して API ユーザー名とパスワードを作成します」の「API 証明書の ...
https://cmonos.jp/blog/2009120701/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | Google Maps API v3 に対応しました

2010年9月15日 ... Google Maps API v3 に対応しました。API キーが必要なくなったほか、ストリートビュー の操作が Googleマップと同様のものとなり、分かりやすくなりました。
https://cmonos.jp/blog/2010091500/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | PayPal をもっとわかりやすくする方法

2010年1月16日 ... PayPal API のオプション「LandingPage」を使おう! PayPal の SetExpressCheckout API には、「LandingPage」というオプションがあります。これは、 ユーザーが PayPal に移動したとき最初に表示するページを指定するものです。
https://cmonos.jp/blog/2010011600/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | なぜ PayPal?

2010年9月15日 ... CMONOS.JP | 開発者ブログ | PayPal API 実装 TIPS. 2011年4月26日 ... PayPal API を実装する上で、ポイントとなるフィールドについて解説します。ツクルゥ〜ノ! ミセテェ〜ッニャッ! https://cmonos.jp/blog/2011042601/1.shtml ...
https://cmonos.jp/blog/2010091501/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | PayPal API 実装 TIPS

2011年4月26日 ... PayPal API を実装する上で、ポイントとなるフィールドについて解説します。ツクルゥ〜ノ !ミセテェ〜ッニャッ!
https://cmonos.jp/blog/2011042601/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | Google カスタム検索で関連ページを表示

2014年1月22日 ... これまで「関連ページ一覧」フィールドタイプは、無料の Google Web Search API を 利用していましたが、同 API が非推奨とされてから3年が経ち、いよいよ不安定となっ てきましたので、Google カスタム検索 API を利用するよう変更しました。
https://cmonos.jp/blog/2014012200/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 地図で物件検索!「不動産サイト」

2010年3月15日 ... サイトテンプレートを適用するには? サイトテンプレートを適用する前に、Google マップ を使えるようにしましょう。サイト URL に対応した「Google Maps API キー」を取得し、「 セットアップアシスタント」の「管理者情報変更」で「Google Maps API ...
https://cmonos.jp/blog/2010031502/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 導入事例の裏側大公開!「東龍」様 編

2010年11月25日 ... CMONOS.JP | 開発者ブログ | Google Maps API v3 に対応しました. 2010年9月15日 ... Google Maps API v3 に対応しました。API キーが必要なくなったほか、ストリート ビューの操作が Googleマップと同様のものとなり、分かりやすくなり ...
https://cmonos.jp/blog/2010112500/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | さくらで、快適 CMONOS.JP!

2009年7月17日 ... 2010年3月15日 ... サイトテンプレートを適用するには? サイトテンプレートを適用する 前に、Google マップを使えるようにしましょう。サイト URL に対応した「Google Maps API キー」を取得し、「 セットアップアシスタント」の「管理者情報変更」 ...
https://cmonos.jp/blog/2009071700/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | PayPal VS Google Checkout

2009年12月7日 ... ※PayPal 手数料欄は PayPal のサンドボックスサーバを利用しているときのみ参考の 為に表示されます。本番サーバでは ... PayPal での支払いについては、PayPal の 払い戻し API を利用しますので、即座に払い戻しが実行されます。
https://cmonos.jp/blog/2009120702/1.shtml

更新情報

最近の記事

RSS

NEXT>>

PC 向けページに移動する