アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

GoogleMapバージョン3について

こんにちは。笹亀です。

iPadが先日、ついに日本で発売されましたが、会社のオフィスには1ヶ月以上も前からあったので、新鮮さがあまりありませんでした。

さて、本日は久しぶりにGoogleMapを利用する機会がありましたので、バージョン3にアップされていたのでまとめておきたいと思います。

特徴として以下の点が新しくなったみたいです。


1.Sensorパラメータを設定
2.バージョン3になってAPIキーが不要
3.iPhoneとAndroidでの表示が可能
4.バージョン2から書き方が若干変更


詳しく解説をしていきたいと思います。

■Sensorパラメータを設定
SensorパラメータをtrueにセットするとGPSから位置情報を発信してユーザの現在の位置を表示してくれるようになるみたいです。たぶんiPhone,Androidの機能で日本の携帯には対応していない機能だと思います。


■バージョン3になってAPIキーが不要


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=trueまたはfalse">

バージョン3になってめんどくさかったAPIキーの取得が無くなったと書いてあり、実際にシンプルな地図を表示したりする場合にはAPIキーは不要ですが、下記の場合はまだどうしてもAPIキーが必要になります。

●HTTPのGoogle Geocoding APIを使用する場合はAPIキーが必要
Geocodingする場合は公式のAPIを使用しないでも下記の箇所でAPIを提供されています。
http://www.geocoding.jp/

APIキーを取得せずにHTTPのGoogle Geocoding APIを使用したい場合はこちらを利用するとよいです。

●モバイル版の位置情報からMAPの画像を表示するAPIを使用する場合
 ※V2からはAPIキーはいらなくなりました(訂正)
携帯の場合はどうしてもjavascriptが使用できない機種が多いため、MAPを画像で表示する方法を利用することが多くなります。下記のURLにパラメータを付与することで利用が可能になります。


http://maps.google.com/staticmap
 ※center:マップの中央の座標を緯度と経度で指定
 ※zoom:ズームレベルを0~19の間で指定(例:zoom=13)
 ※size:表示するマップのサイズを幅×高さで指定(MAXで512x512)
 maptype:マップの表示タイプを指定します(roadmapとmobile)
      roadmapは標準のマップ表示
      mobileは携帯用に見やすくした表示
 markers:マーカーをマップ上に配置する。
      マーカーの緯度・経度、マーカーの色(red,blue,green)、
      マーカーの文字(a-z)を|(パイプ、%7C )で区切ることで複数指定できる。
 ※key:Google Maps API キーを指定
 sensor:false



iPhoneAndroidでの表示が可能
スマートフォン向けにJavascriptの読み込むを改良し、早くなったらしいです。iPhoneAndroidの場合の表示領域をwidthとheightを100%にするとよいとも記載されています。

■バージョン2から書き方が若干変更
MAP作成方法を例に書き方の違いに気を付けましょう。


バージョン2
map = new GMap2('map_view');

バージョン3(初期設定を第2引数でおこなえるようになりました
map = new google.maps.Map('map_view', mapOptions);


このように違いが多少ではありますがありますので、利用方法に注意して使用するようにしてください。APIキーはドメインごとに必要になり、取得するのが手間になりますのでできるだけ取得しない方法を選択するのがよいと思います。携帯版のMAP画像を実装する際にはまだどうしてもAPIキーが必要になります。
 ※これがどうにかなれば本当の意味でKEYを取得せずに利用ができます。


[おまけ]
Google Analyticsがモバイルに正式に対応されていました。
 http://analytics-ja.blogspot.com/2010/02/expanded-mobile-reporting.html
PHP, Perl, JSP, ASPXの4種類の言語で設置ファイル生成をサポートしております。


設置はページのFooter箇所にimgタグで指定するようです。モバイル版の設置方法は工夫をすれば行えましたが、正式にリリースされたので正式な方法で利用する方がよいのではないでしょうか。
また、PC向けのトラッキングコードとの併用はできないようですのでご注意ください。

GoogleMapsAPIの新機能 ルート検索機能を試してみる

こんにちは。松田です。
GoogleMapsAPIにルート検索機能がついたらしいので試してみました。
英語版では以前から使えたようですが、日本語版での使用が可能になったということらしいです。

http://googlejapan.blogspot.com/2009/06/api.html

使い方は簡単で、今までのコードに少し付け足すだけでルート検索機能を追加することが出来ます。
1. script呼び出しの "v=2" の部分を "v=2.x" に変更


<script src="http://maps.google.com/maps?file=api &amp;v=2.x &amp;key=....

これで今回使用するGDirectionsクラスが使用できるようになります。

2. GDirectionsにGMap2オブジェクトを渡しインスタンスを生成


directions = new GDirections(map);


3. 出発地点と到着地点の「座標」もしくは「地名・名称」を配列に格納
座標の場合はGLatlng型を渡し、地名の場合はそのまま文字列で渡します。


points = [];
points.push(new GLatLng(35.706,139.76)); 
points.push('東京ドーム');


4. 座標、地名の配列をGDirectionsのloadFromWaypointsに渡す


directions.loadFromWaypoints(points);


これで完成です。
コード全体は以下のようになります。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Google Maps JavaScript API Example</title>  
  <script src="http://maps.google.com/maps?file=api &amp;v=2.x &amp;key=ABQIAAAAbMxmqyfT0_t60Kczi-q5lBSySxmB-uUmG4DOxxXg63OHEaT07BREeBFXvMHRK6Ipn7liRsdLZmNVNA" type="text/javascript"></script>  
  <script type="text/javascript">
  //<![CDATA[
  var map;
  var directions;
  
  function load() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(35.706, 139.76), 13);

      points = [];
      points.push(new GLatLng(35.706,139.76));
      points.push("東京ドーム");

      // ルート詳細を表示する場合は第二引数にdivエレメントを渡す
      directions = new GDirections(map, document.getElementById("route"));
      directions.loadFromWaypoints(points);
    }

  }
  //]]>
  </script>
</head>
<body onload="load()" onunload="GUnload()">
  <div id="map" style="width: 500px; height: 300px"></div>
  <div id="route"></div>
</body>
</html>


実行結果はこちらです。


また、以下のようにGDirectionsコンストラクタの第2引数にdivエレメントを渡すとルートの詳細を自動的に表示してくれます。


directions = new GDirections(map, document.getElementById("route"));

これはこっちのページにサンプルを載せておきます。

divを一つ用意するだけでルートの詳細が出るのはうれしいですね。
これが見やすいのかどうかは微妙ですが。


3, 4の部分はloadFromWaypointsの代わりにloadを使った、文字列をまとめて一つ渡すだけの方法もありますが、コードの組みやすさや座標を組み込むことを考えると、loadFromWaypointsだけ覚えておけばいいんじゃないかなーと言う気がします。


directions.load( 
  "from: 東京都文京区本郷3丁目 to: 東京ドーム", 
  { 
    locale: "ja", 
    travelMode: G_TRAVEL_MODE_DRIVING // 交通手段
  } 
); 

上記の交通手段の選択についてですが、APIでは2種類用意されているように記述されていますが、これが正確に動作しているかどうかは怪しいようです。
ルート検索のAPIについての質問 [Google-Maps-API-Japan]


また、このルート検索機能の仕様として、検索を実行すると開始地点・中継地点・到着地点に緑色のGMarkerが必ずaddOverlayされてしまいます。
自分で生成したマーカーをドラッグさせて開始地点・終了地点を決めるようなスクリプトを作ろうとすると、コイツが邪魔をしてうまくクリック出来なくなってしまうので注意しましょう。
本家にそれをうまく回避したデモがありました。

http://esa.ilmari.googlepages.com/draggabledir.htm

なんにせよ使いどころの多い機能だと思いますので、今後も注目していきたいですね。

GoogleMapsAPI for FlashとJavscript版のGoogleMapsAPIを比べてみた

こんちわ。松田です。
つい最近GoogleMapsAPIを触る機会があったので、今まで使ったことのなかったFlash版のGoogleMapsAPIをいじってみました。
Flash版のFlex SDK、FlexBuilder、Flash CS3の場合のチュートリアルがそれぞれ公開されていますが、今回は最近良く使っているFlexBuilder上で実装しました。

以下、FlexBuilder使用時のGoogleMap表示までの大体の道筋を記述しておきます。

1. GoogleMapsAPI Keyの取得
GoogleMapsAPIを使用するために必要なAPI Keyを取得します。
http://code.google.com/intl/en/apis/maps/signup.html
すでにJavascript版のGoogleMapsAPIでキーを取得済みの場合はそれをそのまま使用できます。

2. GoogleMapsAPI for Flash SDKのダウンロード
ここのページの右中央部分、「How do start?」の2番、「Download the Google Maps API for Flash SDK」のリンクからSDKをダウンロードします。
このファイルを解凍し、適当な場所においておきます。

3. FlexBuilderで新規プロジェクトを作成
FlexBuilderを立ち上げ、「ファイル」→「新規」→「Flexプロジェクト」を選択。
「ライブラリパス」の設定タブが現れる画面まで「次へ」をクリック。
そのタブ内の「SWCの追加」ボタンをクリックし、先ほどダウンロードしたSDK内のswcファイルを指定します。
map_flex_1_9.swcとmap_1_9.swcの二つがありますが(2009年4月13日現在)、flex用のmap_flex_1_9.swcを選択します。

↑こんな状態になります。
これで「終了」をクリックしてプロジェクトを作成。

4. ActionScriptコードの記述
生成されたmxmlファイルに、
http://code.google.com/p/gmaps-samples-flash/source/browse/trunk/samplecode/MarkerDrag.mxml
この辺のサンプルコードをコピペ。
mapオブジェクトの生成直後に、


map.key = '取得したAPI Key';

を入力。これで実行すれば完了です。あとはリファレンスページを眺めながら欲しい機能を追加していきます。



上記のサンプルだと特に面白くなかったので、こっちの記事で作った機能をFlash版で実装してみました。
ソースコードは、Flash内で右クリックして「ソースの表示」をすれば見ることができます。



Javascript版と比べてどうなの?
あれ・・・なんかFlash版のほうが速い?となんとなく感じたので、Javascript版とFlash版の速度を比較してみました。

マーカーを表示させる数を100個、200個、300個・・・と増やしていき、何秒かかるか計測しています。すべてIE7で計測してます。念のため毎回ブラウザを終了させてやってます。
ちなみに計測開始はそれぞれの最初のメソッドが呼び出された箇所で、ページ表示時からの時間ではないので、そのあたりで多少の差はあるかもしれません。

個数:表示までにかかった時間(ミリ秒)
マーカー数JavascriptFlash
100個21251109
200個38281531
300個59072187
400個82192781
500個101413391
1000個228907453
Flash版がすんごい速いですね。
単純計算で描画の速度は3倍近くになってます。あっとうてきじゃないか。


Javascript版とFlash版で使用できる機能に差があるのかどうかはいまいち不明なのですが、ストリートビューは使用できないようです。
ですがこちらのmotuLogさんの記事によるとJavascript版との連携によりFlash内に表示させることは可能なようです。すげー。
http://plug.heteml.jp/motulog/


開発中の感想としては、これまではGoogleMapAPIを使用すると必ずJavascript開発がくっついてきてたわけですが、その周辺の問題を特に気にしなくて良くなったので、ブラウザの違いによる(IEによる)ストレス・心労負担が軽減されること間違い無しです。
また、FlexBuilder等の入力補完機能が使えたりデバッグが楽になるのもありがたいです。

これで機能も一通りそろっているのであれば、これからGoogleMapsAPIを使った開発はFlash版でもアリかもしれません。
今後地図アプリを作る予定のある方、Javascriptアレルギーのある方はぜひ使ってみてはいかがでしょうか。


参考:Flex BuilderでGoogle Maps API for Flash [ちょこっと]

Google MapsとMySQLの連携

こんにちは、アシアルの中川です。
Google Mapsに表示する情報をMySQLのgeometry型で扱う方法を試してみました。

Google Mapsのある地点にマーカーを表示したりすることがある場合、
緯度・経度の情報で地点に表示させることができますが、
データベースにこの情報を保存する場合、lat(float), lng(float)とそれぞれカラムに保存する方法もあるのですが、この方法では各データの位置の関係が非常に扱いにくくなります。
Google Mapsで表示されている範囲内のデータのみ取得したい場合や、
ある地点から近い順に取得する場合などに面倒なことになります。

そこで、MySQL4.1以降で用意されている空間情報を扱う機能の「geometry」型を使用します。
MySQL 4.1 リファレンスマニュアル :: 10 MySQL における空間情報の機能(日本語)」
MySQL :: MySQL 5.0 Reference Manual :: 11.12 Spatial Extensions(英語)」
MySQL :: MySQL 5.1 リファレンスマニュアル :: 16 Spatial Extensions(英語)」

※今回紹介する方法は、「鉄道模型のコミュニティ『トレイン・トレイン』」にて
先日リリースしたコンテンツ「鉄マップ」にも使用してみました。

テーブルの作成ですが、空間情報を扱うカラムの型を「geometry」と指定します。


CREATE TABLE `spot` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `name` varchar(255) NOT NULL,
  `latlng` geometry NOT NULL,
  `zoom` tinyint(2) unsigned default NULL,
  PRIMARY KEY  (`id`),
  SPATIAL KEY `spot_latlng_index` (`latlng`)
) ENGINE=MyISAM;


空間情報用のカラムにインデックスを作成するためには、「InnoDB」でなく「MyISAM」を使用し、
「SPATIAL」キーワードを使いインデックスを作成します。
また、対象のカラムが「NOT NULL」宣言がされている必要があるようです。

これで、準備ができました。次にデータを登録してみましょう。

通常のINSERT文の発行で行えるのですが、geometry型のカラムにデータを入れるためには、変換用に用意されている関数「GeomFromText」を使用します。


mysql> INSERT INTO `spot` (`name`, `latlng`, `zoom`) VALUES ('アシアル株式会社', GeomFromText('POINT(139.762522 35.706752)'), 19);

mysql> SELECT * FROM spot;
+----+--------------------------+---------------------------+------+
| id | name                     | latlng                    | zoom | +----+--------------------------+---------------------------+------+
|  1 | アシアル株式会社         |        @`xa@              |   19 |
+----+--------------------------+---------------------------+------+

上記にようにそのまま、取得しようとすると、geometry型がおかしな状態で表示されると思います。

緯度経度を取り出すときには関数(X, Y, AsTextなど)を使用し、以下のように変換して取得することができます。



mysql> SELECT id, name, X(latlng) as lng, Y(latlng) as lat, zoom, AsText(latlng) as geomtext FROM spot;
+----+--------------------------+------------+-----------+------+-----------------------------+
| id | name                     | lng        | lat       | zoom | geomtext                    |
+----+--------------------------+------------+-----------+------+-----------------------------+
|  1 | アシアル株式会社         | 139.762522 | 35.706752 |   19 | POINT(139.762522 35.706752) | 
+----+--------------------------+------------+-----------+------+-----------------------------+


データベースの準備ができたところで、次はGoogle Maps側です。



var lat = 35.706752;
var lng = 139.762522;
var zoom = 19;

//マップを作成し、中央を指定位置にセットする。
var map = new GMap2(document.getElementById("map-canvas"));
map.setCenter(new GLatLng(lat, lng), zoom); 
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addMapType(G_SATELLITE_3D_MAP);

//指定位置にマーカーをセットする。
var marker = new GMarker(new GLatLng(lat, lng));
map.addOverlay(m);


Google Mapsで表示しているエリアの情報を以下のように取得できます。



var options = {};

//センターとズーム情報取得
var center = map.getCenter();
options['lng'] = center.lng();
options['lat'] = center.lat();
options['zoom'] = map.getZoom();

//表示範囲情報
var latlngbounds = map.getBounds();
var sw = latlngbounds.getSouthWest();
var ne = latlngbounds.getNorthEast();
options['bounds[swlat]'] = sw.lat(); //南西の緯度
options['bounds[swlng]'] = sw.lng(); //南西の経度
options['bounds[nelat]'] = ne.lat(); //北東の緯度
options['bounds[nelng]'] = ne.lng(); //北東の経度


JavaScriptで取得したデータをAjaxなどでサーバに投げてやります。
取得するタイミングは以下のようにイベント発生のタイミング等指定できます。



GEvent.addListener(map, 'dragend', function(){
  //マップのドラッグ移動終了後
  // ここで位置・範囲取得やajax等の処理をする
});

GEvent.addListener(map, 'zoomend', function(){
  //マップのズーム変更終了後
  // ここで位置・範囲取得やajax等の処理をする
});

※詳細につきましては、「Google Maps APIリファレンス」を参照してください。

以上のようにGoogle MapsなどからAjaxでサーバ側に送信した地点や、範囲などの情報を使う際に、MySQLの「geometry」型の威力が発揮されます。

Ajax送信やサーバ側の受信のコードはここでは、触れませんが以下のSQLと組み合わせれば簡単に実装できるでしょう。

※サンプルデータは以下を使用


mysql> SELECT id, name, X(latlng) as lng, Y(latlng) as lat, zoom, AsText(latlng) as geomtext FROM spot;
+----+--------------------------+------------+-----------+------+-----------------------------+
| id | name                     | lng        | lat       | zoom | geomtext                    |
+----+--------------------------+------------+-----------+------+-----------------------------+
|  1 | アシアル株式会社         | 139.762522 | 35.706752 |   19 | POINT(139.762522 35.706752) | 
|  2 | 東京ドーム               | 139.752016 | 35.705567 |   18 | POINT(139.752016 35.705567) | 
|  3 | 東京タワー               | 139.745423 | 35.658582 |   18 | POINT(139.745423 35.658582) | 
|  4 | 大阪駅                   |     135.29 |     34.42 |   16 | POINT(135.29 34.42)         | 
|  5 | 名古屋                   |     136.54 |     35.11 |   16 | POINT(136.54 35.11)         | 
|  6 | 那覇市                   |     127.41 |     26.13 |   16 | POINT(127.41 26.13)         | 
+----+--------------------------+------------+-----------+------+-----------------------------+
6 rows in set (0.00 sec)


■2点間の距離の近い順に5件取得する。(ここではアシアルの緯度経度から近い順)


mysql> SELECT 
    -> id, name, X(latlng) as lng, Y(latlng) as lat, zoom, 
    -> GLength(GeomFromText(CONCAT('LineString(139.762522 35.706752,', X(latlng), ' ', Y(latlng),')'))) AS len 
    -> FROM spot ORDER BY len;
+----+--------------------------+------------+-----------+------+-------------------+
| id | name                     | lng        | lat       | zoom | len               |
+----+--------------------------+------------+-----------+------+-------------------+
|  1 | アシアル株式会社         | 139.762522 | 35.706752 |   19 |                 0 | 
|  2 | 東京ドーム               | 139.752016 | 35.705567 |   18 | 0.010572618455228 | 
|  3 | 東京タワー               | 139.745423 | 35.658582 |   18 | 0.051114818800422 | 
|  5 | 名古屋                   |     136.54 |     35.11 |   16 |   3.2773100234778 | 
|  4 | 大阪駅                   |     135.29 |     34.42 |   16 |   4.6539428176534 | 
|  6 | 那覇市                   |     127.41 |     26.13 |   16 |    15.63006649474 | 
+----+--------------------------+------------+-----------+------+-------------------+
6 rows in set (0.00 sec)


■指定した範囲内のデータを取得する。(ここでは東京周辺の範囲のみ)


mysql> SELECT id, name, X(latlng) as lng, Y(latlng) as lat, zoom 
    -> FROM spot 
    -> WHERE MBRContains(GeomFromText('LineString(140.05508422851562 36.00134056648952, 139.20089721679688 35.55345722493522)'), latlng);
+----+--------------------------+------------+-----------+------+
| id | name                     | lng        | lat       | zoom |
+----+--------------------------+------------+-----------+------+
|  1 | アシアル株式会社         | 139.762522 | 35.706752 |   19 | 
|  2 | 東京ドーム               | 139.752016 | 35.705567 |   18 | 
|  3 | 東京タワー               | 139.745423 | 35.658582 |   18 | 
+----+--------------------------+------------+-----------+------+
3 rows in set (0.00 sec)


このように、通常のカラム型で保存した場合と違い、位置情報を有効に使用することができます。
まだ、2つのPOINT間の最短距離を返してくれる、Distanceなどの関数は使えないようですが、
マニュアルを見る限りでは、将来的にはサポートされるようです。

パフォーマンス等については、まだ私のほうでは未検証ですが、
位置情報を扱うには非常に簡単に扱えますので、ぜひ試してみてはいかがでしょう。

[補足]PostgreSQLでも位置情報を扱うことができ、PostGISやPostLBSなどのさらに便利な感じのものもあります。

座標から地名を取得する逆GeocodingAPIのまとめ + サンプル

こんちは。松田です。
トレイン・トレインで使用しているGoogleMapをいじっている時に座標(緯度・経度)から地名を取得する必要が出てきたので、その際に調べた逆Geocoding機能を実装したAPIをまとめてみました。

GoogleMapsAPIなど地図を使ったシステムを使用していると、住所から緯度経度などの情報を取得する方法が必要になります。これはGeocodingと呼ばれる技術で、GoogleMapsAPIではすでに公式なAPIが存在しています。
これとは逆に、ユーザーに登録させたスポットの地名を自動入力させたりする場合など、座標から地名情報を取得したい場合があります。これらは「逆Geocoding」や、「Reverse Geocoding」などと呼ばれていますが、現在のところGoogleMapsのAPIは提供されていません。
この逆Geocoding機能が使えるサービスをいくつか紹介します。

・YahooローカルサーチAPI
http://developer.yahoo.co.jp/map/localsearch/V1/localsearch.html
言わずと知れたYahooのAPI
24時間中1IPアドレスにつき50000件のリクエストまでの制限あり。
本来は座標やキーワードからYahooの持つ周辺情報の検索を行うAPIだが、地名のみに絞って検索することで対応可能。
事前にアプリケーションIDの取得が必要。
取得できる地名は「都道府県・市区町村・番地が連結された文字列」のみ。
そのため、「都道府県名」「町名」を個別に取得する場合は独自の変換が必要。
日本測地系」「世界測地系」の指定が可能。
指定座標からの範囲を指定し、複数の候補地点を取得することができる。
出力はXML形式、JSON形式が選択可。

・ReFITS Lab 逆ジオコーディングサービス
http://refits.cgk.affrc.go.jp/tsrv/jp/rgeocode.html
出力はJSONP形式、phpでserialize化された文字列形式。
PHPスクリプトに組み込みやすい。
1日あたり10万アクセスまで許可。これを超えそうならば事前に要相談。
つい最近バージョン3が公開されたばかりで、YahooローカルサーチAPIのように複数の候補を取得できるようになった。
都道府県名」「市区町村名」などに加えて、「都道府県コード」「市区町村コード」「町丁目」「番地」なども個別に取得可能。
さらに、「候補地点(代表点位置)の座標」や「検索座標から候補地点座標までの距離」も取得できる。
これを使用したサービスを公開する場合は、以下の文章と同じ趣旨の内容をユーザーに通知しなければならない。


「当該サービス提供者は、当該サービスを無保証で提供しており、当該サービスが原因で発生した損害等について、補償等は一切おこないません。」

また、番地情報まで使用・表示させる場合、以下の趣旨の文章を通知しなければならない。


「番地情報は、実態と異なる場合があり、またプライバシーにも関わることがありますので、特に慎重に扱って下さい。」


・invGeocoder
http://www.knya.net/archives/2005/07/rest.html
利用制限無し。
都道府県名」「市町村名」「町名」「番地」と、「候補地点の座標」「候補地点までの距離」を取得できる。
出力はXML形式。
使いやすいが、作者の言っているようにそのうちサービスが止まるかもしれないのがちょっぴり不安。

・Knecht(クネヒト) 逆ジオコーディングAPI
http://api.knecht.jp/reverse_geocoding/
一日当たりの利用制限等については言及無し。
都道府県名」「市町村名」「町名」の取得が可能。
出力はXML形式、JSON形式が選択可。
今回紹介する中では一番シンプル。

ちず丸 「ここの住所は?」機能
http://www.chizumaru.com/czm/currentadr.aspx?x=502779.393&y=128135.353
ちず丸が提供するAPI?それともただの出力結果画面?
どちらにしろ座標から地名を出せるということで一応ピックアップ。
この機能に関する説明ページを見つけられなかったので、これをシステムに組み込んでいいのかどうかは不明。
これはどこから辿り付けるページなのか誰か教えてください・・・。
座標から郵便番号と地名は取得できるが、HTMLページで返されるので、もし使うのであればパース処理を実装しなければならない。
パラメータのx,yの値の算出方法はこちらのページ参照。
http://q.hatena.ne.jp/1203488398


・海外モノ
http://www.geonames.org/export/reverse-geocoding.html とか、
http://groups.google.co.jp/group/Google-Maps-API/web/resources-non-google-geocoders?pli=1 の下のほうとか。
日本の地名取得は無理なのが大半っぽいのでほとんど調べてない。
「reverse geocoding」でググるといっぱいでる!

※各APIの詳細な利用規約はご自分でお確かめください。



せっかくなので、APIを調べているときに作ったサンプルを公開します。
YahooのローカルサーチAPIを使って座標から地名を取り出しています。

まず必要になるのはYahooAPI用のアプリケーションID。
これは以下のページから事前に取得しておきます。
http://e.developer.yahoo.co.jp/webservices/register_application

パラメータのp(検索キーワード)の欄には必須と書いてありますが、lat、lon、distを指定する場合は省略可能のようです。
また、パラメータのnの値で結果取得件数を指定することができますが、今回はnを1にして表示された地名をそのまま座標の地名として使用しています。
取得した地名の並び順が指定座標に近い順かどうかは不明なので、この方法で最適な地名が取れているかどうかは若干怪しいです。

GoogleMapsは日本地図も世界測地系なので(確か)、「datum=wgs」を指定しています。


APIを使用して実際に地名を取得するPHPスクリプト
・getplacename.php


<?php

// POSTされてきた緯度・経度を取得
$lat = isset($_POST['lat']) ? $_POST['lat'] : null;
$lng = isset($_POST['lng']) ? $_POST['lng'] : null;
if (!$lat || !$lng || !is_numeric($lat) || !is_numeric($lng)) {
  exit;
}

// APIを使用するURLを生成
$url = 'http://map.yahooapis.jp/LocalSearchService/V1/LocalSearch?'
	. 'appid=(アプリケーションID)'
	. ' &lat='.urlencode($lat)
	. ' &lon='.urlencode($lng)
	. ' &dist=3' // 上記指定座標からの検索範囲(km)
	. ' &category=address' // 地名のみ検索
	. ' &n=1' // 検索結果は1つだけ取得
	. ' &datum=wgs' // 世界測地系を使う
	. ' &al=3'; // 丁目、字レベルまで取得

// 結果を取得
$contents = file_get_contents($url);

// 住所部分を取得してecho
$xml = simplexml_load_string($contents);
$address = (string)$xml->Item->Address;
echo $address;
exit;
?>

下で表示しているGoogleMapからAjaxで呼び出しています。


ソース表示
ピンをドラッグした先の座標をgetplacename.phpに送り、その座標をYahooローカルサーチAPIに渡し、取得した地名をInfoWindowに表示しています。

GoogleEarth API と GoogleMaps API を連動させてみる

こんにちは。松田です。
地図を表示するアプリケーションとしては GoogleMaps や GoogleEarth が有名です。
GoogleMapsはブラウザ上での実行、GoogleEarthはクライアントソフトでの実行となりますが、先日Googleが「GoogleEarth API」という、GoogleEarthをブラウザ上で表示できるAPIを発表しました。
今回は早速それを試してみたいと思います。

API Keyの取得
まずはAPI Keyの取得です。
このキーを取得しないとGoogleEarth APIを使用することができません。
API KeyはGoogleMaps APIと共通ということなので、下記リンクから取得します。
GoogleMaps API Keyの取得

■ サンプルスクリプトを取得
GoogleEarth APIのサイトにサンプルスクリプトのまとめページがあるのでこれを使ってみます。
今回は最もシンプルな「Hello, Earth」をコピペして使います。
マップスクリプトの読み込み部分の「key」の値を先ほど取得したAPI Keyに書き換えます。


<script src="http://www.google.com/jsapi?key=(取得したAPI Key)"></script>


プラグインのインストール/実行
これで準備完了です。
最初の表示時にはプラグインのインストールを求められますが、これをインストールしないとGoogleEarthが表示できないのでクリックしてインストールしてください。


ソースの表示

うごいた!カッケー!

操作方法もクライアントソフトのGoogleEarthとほぼ同じです。
右クリックしながらマウスドラッグでぐりんぐりん動かせます。
マウススクロールで拡大縮小することも可能です。


■ GoogleMapsと連動させる
そして、なんと、GoogleEarth APIはGoogleMaps APIと連動できるようです。
簡単に言うと、これまでGoogleMaps APIで作られていたシステムが簡単にGoogleEarth化できちゃうよ、ということです。

まずは通常のGoogleMapを作成。

・ソースの表示

サンプルをほぼ丸パクリした、いたって普通のGoogleMapです。

これをGoogleEarth化するためにはGMap2オブジェクト作成後に次の行を加えます。


map.addMapType(G_SATELLITE_3D_MAP); // mapはGmap2のインスタンス

これはmapType切り替え機能を使用していないシステムでは動作させることができません。
その際は下の行も書き加えてマップタイプ切り替え機能自体を追加してください。


map.addControl(new GMapTypeControl()); 


次に、GoogleMapのスクリプト呼び出し部分を変更します。
「v=2」となっている部分を「v=2.x」に変更します。


<script src="http://maps.google.com/maps?file=api &amp;v=2 &amp;key=・・・
↓
<script src="http://maps.google.com/maps?file=api &amp;v=2.x &amp;key=・・・

基本的に、この2箇所の変更だけで完了です。

これでマップタイプの選択肢に「Earth」が加わり、これをクリックするとGoogleEarthとして表示されるようになります。

・ソースの表示

スゲー!!!
(※マップ切り替え時のLoading時間がかなり長いので辛抱強く待ちましょう)

表示してみるとわかりますが、GoogleMaps上に配置されたMarkerが特殊なコードを書く必要も無くそのままGoogleEarth上に表示されています。
これはGoogleMaps上にラインを引けるGPolylineクラスなどでも同様に可能です。


■ オマケ
というわけで、ほぼ放置されていた地図日記2を、早速GoogleEarth化させて見ました。

地図日記では地図を移動させるたびにAjaxでスポット位置を取り出してMarkerを配置するようにしていましたが、さすがにその機能は上記のスクリプト追加だけでは実装できないようです。
GoogleEarthで表示されるのは最初に表示されているMarkerだけのようで、初期表示のMarkerだけが表示されています。
今回は表示の切替部分しか作っていませんが、このへんはまだまだ研究が必要そうですね。

-------------------------------------------------------
5/30 追記
トレイントレインのショップ情報ページにもGoogleEarth機能を付けてみました。
こっちは最初に全てのスポットを読み込んで表示するだけのシンプルな機能なので、おおかたうまくいっているみたいです。
-------------------------------------------------------


・微妙に関連
Google Maps を Google Earth 風にする(てっく煮ブログ)
これはこれでカッコイイ

2種類のGoogleMap画像出力を比べてみる

こんにちは、笹亀です。

以前に「携帯でGoogleMapを手軽に表示するPHPクラス」の実装方法をご紹介させていただきました。その後、正式にGoogleからGoogleMapを画像で出力する方法が公開されましたが、今回は正式なものを実際に使用して、以前にご紹介したものと比べて解説していきたいと思います。

まずは、私が書いた以前のブログを参照していないかたは、下記よりご参照ください。
http://blog.asial.co.jp/332

今回も設定と表示をまとめたPHPのクラスを作成したいとおもいます。
まずは設定するパラメータについて説明します。
 ※center:マップの中央の座標を緯度と経度で指定
 ※zoom:ズームレベルを0~19の間で指定(例:zoom=13)
 ※size:表示するマップのサイズを幅×高さで指定(MAXで512x512)
  maptype:マップの表示タイプを指定します(roadmapとmobile)
      roadmapは標準のマップ表示
      mobileは携帯用に見やすくした表示
  markers:マーカーをマップ上に配置する。
      マーカーの緯度・経度、マーカーの色(red,blue,green)、
      マーカーの文字(a-z)を|(パイプ、%7C )で区切ることで複数指定できる。
 ※key:Google Maps API キーを指定

※:設定が必須のものです

設定の詳しい内容は下記をご参照ください(英語)
http://code.google.com/apis/maps/documentation/staticmaps/#Usage

すぐに使ってみたい方は、
APIキーがなくても下記から作成できるみたいです。
http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html

以下からは、PHPで作成したMap画像の設定・表示クラスを作ります。
 ※ファイル名は「googleMapPictureView.php」として作成します。


<?php

//携帯でGoogleMapの画像をプリントするクラス
class GoogleMapPictureView{
  //取得URLとクエリを保持する変数
  private $geturl = 'http://maps.google.com/staticmap?key=[取得したAPIKEYをセット] &maptype=mobile';
  private $center = "";
  private $width  = "220";
  private $height = "300";
  private $zoom   = "16";
  private $point  = "markers=";

  //画像を取得するためのURLをセットするメソッド
  public function setCenterPoints($latitude,$longitude,$points = null) {
    //中心の位置がない場合はfalseを返す
    if( $latitude == "" || $longitude == ""){
      return false;
    }

    //地図画像の中心をセット
    $this->center = "$latitude,$longitude";
    
    //複数のポイントを表示させる
    if(!is_array($points)) return true;
    foreach( $points as $point ){
      if(!isset($point["latitude"]) || !isset($point["longitude"])) continue;
      if(!isset($point["icontype"]) ) $point["icontype"] = "reda";
      $this->point .= "{$point["latitude"]},{$point["longitude"]},{$point["icontype"]}%7C";
    }
    $this->point = substr($this->point,0,strlen($this->point)-3);
    
    return true;
  }
  
  //横と縦サイズ、ズームレベルをセットする
  public function setSize($width,$height,$zoom) {
     if (is_numeric($width)) {
       $this->width = (int)$width;
     }
     if (is_numeric($height)) {
       $this->height = (int)$height;
     }
     if (is_numeric($zoom)) {
       $this->zoom = (int)$zoom;
     }
  }
  
  //画像を出力するメソッド
  public function viewPicture() {
    $query = "";
    $query .= $this->geturl . " &center=" . $this->center . " &size=" . $this->width . "x" . $this->height . 
    " &zoom=" . $this->zoom . " &" . $this->point;
    header("Content-type: image/gif");
    readfile($query);
  }

}


最後にクラスを読み込み、設定を行うメソッドを使い、画像を表示するメソッドを実行するスクリプトを作成すると完成です。


<?php
require_once ("./googleMapPictureView.php");

$points = array();
$points[] = array('latitude' => 35.707701,'longitude' => 139.761787,'icontype' => "greena");
$points[] = array('latitude' => 35.706847,'longitude' => 139.762618,'icontype' => "redb");
$points[] = array('latitude' => 35.706764,'longitude' => 139.762515,'icontype' => "bluec");
$points[] = array('latitude' => 35.705764,'longitude' => 139.762515,'icontype' => "bluez");
$gmap = new GoogleMapPictureView();
$gmap->setCenterPoints("35.707215","139.762162",$points);
$gmap->setSize("240","240",'16');
$gmap->viewPicture();
?>


サンプルは、以下のQRコードを携帯で読み込んで内容を確認できます。


実際に実行した画面では、以前のものと見た目では違いはありません。
では、実際にはどちらを使うほうがよいのでしょうか?
自分なりにまとめた、メリットとデメリットをあげて比べてみることにします。

■正式に公開された方について
メリット
・規約に違反することがなければ、自由に使える
・正式に認められた方式であること

デメリット
・出力画像形式までは選択できず、GIFだけである
 →携帯用といっているのに出力形式が1種類というのはちょっと残念
・必ずAPIキーが必要になる
・出力画像サイズ(バイト数)が大きい

■以前の方法について(http://blog.asial.co.jp/332
メリット
・JPG,GIF,PNGの3種類の出力方法を選択できる
・設定での制限がない(サイズ指定など
APIキーは必要ない

デメリット
・正式には認められた方法ではないため、いつ廃止されるかわからない
・正式な規約がないので、どこまでのことをしてよいのか?(アクセス数や商用利用など
・出力画像サイズ(バイト数)が大きい


どちらかというとやはり認められた方法を使うことをお勧めしますが、出力やサイズの制限が掛かります。
個人のサイトなどで使用する場合は、設定オプションや出力形式なども選択できるので、
「以前の方法」がよいと思います。
使用する際には、必ずサイトの特性と両方のメリットとデメリットを考えて使用するようにしましょう。

どちらを使用するにあたって、携帯で地図が閲覧できるようになることは、
とても魅力的なコンテンツを作成することができるようになります。

上記の地図表示方法を上手に利用して、
よりよい携帯コンテンツの作成に励んでみてはいかがでしょうか^^

選択文字列を翻訳したり地図検索したりするブックマークレットを作ってみました

こんちわ。松田です。

つい最近、JavaScriptを使ってマウスカーソルの選択範囲の文字列を取得する方法を知りました。
これを使って遊んでたら楽しかったので、せっかくなのでブログのネタにしたいと思います。

参考URL:http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20Range%A4%CE%BB%C8%A4%A4%CA%FD

まずは選択範囲の文字列取得方法です。
ものすごーくはしょって説明すると、


// IEの場合
document.selection.createRange().text

// Mozilla系の場合
window.getSelection()

で取得できます。意外と簡単。
重要な部分をかなり省いたので詳しくは上記URLを参考にしてください。


そしてこれを利用していろいろ作ってみました。
マウスカーソルで文字列をドラッグし、範囲選択した状態でボタンを押してみてください。
たぶん実用性はありません。
(でも時間が無かったのでIE用にしか作ってません。隙をみて作ります。。)



・選択範囲をリンクに変える

選択範囲の単語をWikipediaへのリンクにしてくれます。
ググったほうが早い!




<script type="text/javascript">
//<![CDATA[
document.getElementById('button1').onclick = function() {
  try {
		var text = null;
	  if (document.all) {
	    // IE
      var range = document.selection.createRange();
      text = range.text;
	    if (document.selection.type != 'Control') {
		    var container = document.createElement("div");  
		    var encap_node = document.createElement('a');
		    encap_node.href = 'http://ja.wikipedia.org/wiki/' + encodeURIComponent(text);
		    container.appendChild(encap_node);  
		    encap_node.innerHTML = text;  
		    range.pasteHTML(container.innerHTML); 
	    }
	  } else {
			// Mozzilla
			text = window.getSelection();
	  }
  } catch(e) {
  }
};
//]]>
</script>







・選択範囲を翻訳する

英語だったら日本語に、日本語だったら英語に直してくれます。
辞書引くよりは早い!けどブラウザのプラグインで事足りそう

翻訳処理自体はmuumoo.jpさんの翻訳APIをお借りしてます。





<script type="text/javascript">
//<![CDATA[
document.getElementById('button2').onclick = function() {
  try {
	  if (document.all) {
			// IE
	    var range = document.selection.createRange();
	    if (document.selection.type != 'Control') {
	      var params = 'text=' + encodeURIComponent(range.text);
	      // prototype.js使ってます
	      new Ajax.Request('/scripts/333/honyaku.php', {method: 'post', parameters: params, onComplete: function (request) {
	        var res = request.responseText;
	        range.text = res;
	      }});
	    }
    } else {
			// Mozilla
		}
  } catch(e) {
  }
};
//]]>
</script>

honyaku.php(サーバー側)




※追記:ブックマークレットから翻訳スクリプトを呼び出すと、このブログ以外のドメインでは動作しないバグがあったので作り直しました。
現在ブックマークレット版翻訳機能は下のスクリプトで動いています。
new Ajax()・・・部分をクロスドメイン可能な形式に変更し、honyaku.phpでは翻訳結果を「echo "showString({$result})";」で返すようにしました。


<script type="text/javascript">
//<![CDATA[
try {
  if (document.all) {
    // IE
    var range = document.selection.createRange();
    if (document.selection.type != 'Control') {
      // このscriptが 「showString('翻訳結果');」を返す
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'http://blog.asial.co.jp/scripts/333/honyaku2.php?text=' + encodeURIComponent(range.text);
      document.body.appendChild(script);
  } else {
    // Mozilla
  }
} catch(e) {
  alert('error ga okitappoi desu..');
}

// ↑のscriptの結果によって呼び出される
function showString(str) {
  try {
    if (document.all) {
      // IE
      var range = document.selection.createRange();
      if (document.selection.type != 'Control') {
        range.text = str;
      }
    } else {
      // Mozilla
    }
  } catch(e) {
  }
}
//]]>
</script>








・選択範囲内にある地名をGoogleMapで表示させる

ネタが足りなかったのでオマケで作ろうとしたら、これに一番時間をとられました。
選択範囲の文字列をYahoo!形態素解析APIに渡して名詞部分だけをリスト化し、それをGoogleMapのGeocodingをつかって表示してます。
無理やりです。

名詞は全部地名としてGoogleMapにぶん投げちゃうので、予期せぬマーカーが立つかもしれません。
↓の文字列等で試してみてください。
[東京から新宿に向かってたはずなのに青梅についてました]

これ作ってて気付いたんですけど、「地名」って地名があるんですね。ややこしい。




<script type="text/javascript">
//<![CDATA[
document.getElementById('button3').onclick = function() {
  try {
	  if (document.all) {
			// IE
	    var range = document.selection.createRange();
	    if (document.selection.type != 'Control') {
	      var div = document.createElement('div');
	      div.style.position = 'absolute';
	      div.style.left     = '10px';
	      div.style.top      = (document.documentElement.scrollTop || document.body.scrollTop + 10) + 'px';
	      div.style.width    = '300px';
	      div.style.height   = '300px';
	      div.style.border   = 'solid 1px black';
	      div.style.display  = 'block';
	      
	      var iframe = document.createElement('iframe');
	      iframe.src = 'http://blog.asial.co.jp/scripts/333/map.php?text=' + encodeURIComponent(range.text);
	      iframe.height = 300;
	      iframe.width  = 300;
	      div.appendChild(iframe);
	      document.body.appendChild(div);
	    }
    } else {
			// Mozilla
		}
  } catch(e) {
  }
};
//]]>
</script>

map.php(サーバー側)






で。
これだけだと役に立つも何もこのページでしか使えないので、お約束のブックマークレットにしてみました。
下のリンクをお気に入りに登録して、文字列を選択した状態でお気に入りをクリックして下さい。
これで好きなサイトで使いまくりです。
(これも現在IEのみ対応です。。。)

選択範囲をリンク
選択範囲を翻訳
選択範囲の地名を地図で表示

このブックマークレットで使用しているb_link.php, b_honyaku.php, b_map.phpは、それぞれ上のほうで紹介したスクリプトのtry{}内をechoしているだけなので省きます。

携帯でGoogleMapを手軽に表示するPHPクラス

皆さん、こんにちは。
笹亀です。

===
追記:みなさんからのたくさんのはてブをしていただけているので、せっかくなのでちょっと宣伝させてもらいます。
弊社の携帯コンテンツとして、携帯専用イベント支援サイト「あつまろ☆ねっと」というサービスを開始しました。「あつまろ☆ねっと(http://www.atmr.jp/)」は現在ベータ版ですが、ぜひぜひ利用してみてください。
後、恥ずかしながらPHPの本を出版することになりました。
ご興味のある方、気になる方、こちらもよろしくお願い致します^^
http://www.amazon.co.jp/exec/obidos/ASIN/4798114383/
===

遅くなりましたが、明けましておめでとうございます。
今年度もよろしくお願い致します。

先日ですが、毎月恒例の誕生日会を行いました。
メンバーの誰かが毎月誕生日を迎えるので、アシアルで毎月行っている行事のひとつです。
今月の誕生日(主役)は松田氏でした。今月もみんなで盛大にお祝いをしました。
ちなみに私の誕生日は先月の12月で、お祝いしていただきました^^

GooleMapはPC版でJavascriptを使用することで地図を表示して使用することが多かったですが、携帯用として使用するために特定の位置を画像として表示できるようになっています。今回はGoogleMapを携帯の地図として出力する方法を解説します。

まずは、特定の位置の地図を描画させたり設定をセットするクラスを作成します。
今回は、「GoogleMobileMapView」クラスとして作成しています。



<?php
//携帯でGoogleMapの画像をプリントするクラス
class GoogleMobileMapView{
  //取得URLとクエリを保持する変数
  private $geturl = 'http://maps.google.com/mapprint?tstyp=4';
  private $query = "";
  private $image_format = "1";
  private $type = array("1"=>"gif","2"=>"png","3"=>"jpeg");
  
  //画像を取得するためのURLをセットするメソッド
  public function setUrl($latitude,$longitude,$settings,$points = null) {
    //中心の位置がない場合はfalseを返す
    if( $latitude == "" || $longitude == ""){
      return false;
    }

    //画像を取得するためのパラメータをセットしていく
    $this->query = $this->geturl . " &c=$longitude,$latitude";
    if(!isset($settings["w"])) $settings["w"] = 200;
    if(!isset($settings["h"])) $settings["h"] = 200;
    if(!isset($settings["z"])) $settings["z"] = 0;
    $this->query .= " &r={$settings["w"]},{$settings["h"]}";
    $this->query .= " &z={$settings["z"]}";
    
    //出力形式をセット(デフォルトはGIF
    if(isset($settings["image_format"])) $this->image_format = $settings["image_format"];
    $this->query .= " &image_format=" . $this->image_format;

    //複数のポイントを表示するのにも対応させる
    if(!is_array($points)) return true;
    foreach( $points as $point ){
      if(!isset($point["latitude"]) || !isset($point["longitude"])) continue;
      if(!isset($point["iconid"]) ) $point["iconid"] = 15;
      $this->query .= " &l={$point["longitude"]},{$point["latitude"]},{$point["iconid"]}";
    }
    return true;
  }

  //画像を出力するメソッド
  public function viewPicture() {
    $pic_type = $this->image_format;
    header("Content-type: image/" . $this->type[$pic_type]);
    if ($this->query != ""){
      readfile($this->query);
    }
  }
}
?>


次にGoogleMobileMapViewクラスファイルを読み込み、実行するためのスクリプトを作成します。
ここでは、私が知っている今までのアシアルのオフィスを示した場所を画像で表示しました。


<?php
require_once ("./gooleMobileMapView.php");

$points = array();
$points[] = array('latitude' => 35707701,'longitude' => 139761787,'iconid' => 17);
$points[] = array('latitude' => 35706847,'longitude' => 139762618,'iconid' => 18);
$points[] = array('latitude' => 35706764,'longitude' => 139762515,'iconid' => 19);
$gmap = new GoogleMobileMapView();
$gmap->setUrl(35707215,139762162,array('w' => 240,'h' => 240,'image_format' => '3'),$points);
$gmap->viewPicture();
?>

上記プログラムを作成した後に、地図が画像形式で表示することができます。
今回は、「Jpeg」で表示しましたが、この他にも 「image_format」の引数の値を変更することで、画像の出力形式を指定できます。指定しない場合はGIF形式になります。
1:GIF 2:PNG 3:JPEG

緯度経度については、桁数を8桁~9桁にあわせる必要があります。
35.707215→35707215
139.762162→139762162

細かい設定などは、http://labs.anoncom.net/others/GoogleMap/MobileImage.htmlに記述されてます。ご確認ください。

作成したサンプルを実行すると以下のような地図が表示されます。


また、携帯でアクセスしたい場合は、
以下のQRコードを携帯で読みとりアクセスしてください。


このように携帯に向けても画像を手軽に無料で表示させることができます。
GoogleMapはこれからも、WebのAPIとしても力になってくれるものだと思います。
GoogleMapのようなAPIを上手に使うことで、Webアプリケーションの作成の幅も広がり、開発の手助けともなってくれると思います。
みなさんも是非、いろいろなAPIを利用してみてはいかがでしょうか。

最後に使用する際には、GoogleMapの利用規約に記述されている規約に違反しないようにお気をつけください。

http://www.google.com/intl/ja_jp/help/terms_maps.html

GoogleMapの地図上に表示したラインの距離を求める方法

こんにちは。笹亀です。

最近は、冬の寒さと乾燥した場所に弱いもので、
もっぱら体調がよくない日々をおくっています。
特に寒さには弱く、社内で一人だけ上着を着た状態で日々の業務をしていることが多く、軽く浮いております(;´▽`A``

今回は、以前にGoogleMapを使ったときに行ったことを紹介したいと思います。
地図を表示したいときによく使用されるGoogleMapですが、地図を表示するだけではなく、GoogleMapの地図上にライン(線)を引くこともできます。
しかし、その引いたラインの距離を求めるにはGoogleMapの標準メソッドでは距離を取得するメソッドは用意されていません。
そこで、複数の線の緯度経度情報からラインの距離を算出する方法を紹介します。

下記のソースは、実際にGoogleMap上にラインを引く処理とラインの距離を算出することができる状態のサンプルソースになります。ところどころの処理にコメントを記述しておりますので、参考にしていただけたらと思います。
 ※少し長文になりますが、ご了承くださいませ。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>SampleMaps</title>
	<script src="http://maps.google.com/maps?file=api &amp;v=2 &amp;key=ABQIAAAAb3kQrCmW9jK9pfLnTGwrDBRy7x2pvRmU9nyFXjHNvjAIsiOmuhQWNSE0_7Zgs4yiUBfBlWoOYWPbzg" type="text/javascript"></script>
	<script type="text/javascript">
		var deflon = 139.759409;
		var deflat = 35.707014;
		var defzoom = 14;
		var mapDiv;
		var map;
		var marker;
		var DistPoint = new Array();
		var DistOL = null;
		//地図を表示するための初期設定
		function initMap() {
			map = new GMap2(mapDiv);
			map.addControl(new GScaleControl());
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl(true));
			map.setCenter(new GLatLng(deflat, deflon), defzoom);

			//地図をクリックしたときのアクション
			GEvent.addListener(map, "click", function(overlay, point) {
				if(overlay == null){
					DistPoint.push(point);
					if(DistPoint.length > 1) {
						line_view();
					}else{
						try {
							map.removeOverlay(marker);
						}catch(error) {
						
						}
						marker = new GMarker(point,{ draggable:true });
						map.addOverlay(marker);
					}
				}
				//マウスのボタンを離したときのアクション
				GEvent.addListener(marker, "mouseup", function() {
					DistPoint.shift();
					DistPoint.unshift(marker.getPoint());
					line_view();
				});
			});

			//地図のドラッグを終了時のアクション
			GEvent.addListener(map, "moveend", function(overlay, point) {
				var zahyo = map.getCenter();
			});
		}
		//ライン(線)を表示する処理
		function line_view(){
			try {
				map.removeOverlay(DistOL);
			}catch(error){}
			//ラインの色と太さと濃さを指定してオブジェクト生成
			DistOL = new GPolyline(DistPoint, "#6600cc", 10, 0.5 );
			map.addOverlay(DistOL);
			
			//ここから線を表示する処理
			var dist = 0;
			var i = 0;
			var str = "";
			while(i < DistPoint.length){
				str = str + DistPoint[i].y + "," +  DistPoint[i].x + "|";
				i++;
			}
			//ここまで
			
			//ここから線の距離を求める処理
			var i = 0;
			while(i < DistPoint.length - 1){
				dist += Gdistance(DistPoint[i], DistPoint[++i]);
			}
			//ここまで

			document.getElementById("distance").innerHTML = "引いた線の距離 約 " + (dist/1000) + "km";
		}

		//初期化呼び出し
		function initPage() {
			mapDiv = document.getElementById("map");
			initMap();
		}
		
		//ひとつ前に戻る処理
		function clearPointBack() {
			var num = DistPoint.length - 1;
			DistPoint.pop();
			line_view();
		}

		//線をクリアする処理
		function clearPoints() {
			DistPoint = new Array();
			map.removeOverlay(DistOL);
			document.getElementById("distance").innerHTML = "引いた線の距離 約 0km";
			DistOL = null;
		}
		
		//2点の線から距離を求める
		function Gdistance(from , to) {
			var from_x = from.x * Math.PI / 180;
			var from_y = from.y * Math.PI / 180;
			var to_x = to.x * Math.PI / 180;
			var to_y = to.y * Math.PI / 180;
			var deg = Math.sin(from_y) * Math.sin(to_y) + Math.cos(from_y) * Math.cos(to_y) * Math.cos(to_x-from_x);
			var dist = 6378140 * (Math.atan( -deg / Math.sqrt(-deg * deg + 1)) + Math.PI / 2);
			return Math.round(dist);
		}
	</script>
</head>

<body onload="initPage()" onunload="GUnload()">
  <div id="map" style="width: 350px; height: 350px"></div>
  <div id="distance" style="font-size: 70%;">引いた線の距離 約 0km</div>
  <form>
    <input type="button" onClick="clearPoints()" value="線をクリア" />
    <input type="button" onClick="clearPointBack()" value="ひとつ前に戻る" />
  </form>
</body>
</html>

実際に作成した地図のサンプルは以下のようになります。
線を引いていくと、距離が加算されていきます。

ここで紹介したラインの距離は必ずしも正確な値とは限りません。
また、傾斜などを考慮した距離にもなっていませんのでご注意ください。

この際、傾斜を考慮した計算を入れてより正確な値を求められたら、より使い道があるものになっていいなと思います。(実際にそういったサイトも見つけましたが・・

GoogleMapはただ単に地図を表示する以外にも自分の画像を地図にしてみたりと、
いろいろな使い方ができます。
これを機会に是非とも、GoogleMapを使ってみてはいかがでしょうか。