Gmaps ちょっぴり応用編 —住所からポイントを取得する—

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。

前書いた記事に、こんなコメントが付きました。

xml内に、経度緯度を書かず、住所とそれ以外の要素を表記(例えば、住所をaddressと)し、html内のjavascriptで、addressを読み込むと同時にジオコーディング(経度緯度を算出)し、googlemap上にxmlの内容に沿ってマーカーが表示される方法が出来たら最高だ!っと思っております。

こんな事って出来るんでしょうか?

—Google Maps API Documentaion サクっと基本部分だけ, daiさんのコメント

つまり、こ~いう...

  1. <markers>
  2. <marker address='神奈川県鎌倉市小町1-5-7' shop='イワタコーヒー店'>イワタコーヒー店<br />(カフェ)</marker>
  3. <marker address='神奈川県鎌倉市由比ガ浜3-1-1' shop='ザ・バンク'>ザ・バンク<br />(バー)</marker>
  4. <marker address='鎌倉市長谷2-20-32' shop='ワンダーキッチン'>ワンダーキッチン<br />(カフェ)</marker>
  5. </markers>

...XMLからポイントを取得しつつ、マーカーを置いてけば良いのですね。できたぜ~。実用性は隅に置いとくとして、なかなか面白い課題でありました。例のごとく高速化もパッケージ化もしてませんが... サンプルは以下。

本家のサンプルを適当に組み合わせる形で実装してますので特に目新しいものは無いですが、肝の部分はココ。

  1. geocoder = new GClientGeocoder();
  2. geocoder.getLatLng(address,function(point){
  3. if (!point) {
  4. alert(address + " not found");
  5. } else {
  6. var marker = new GMarker(point);
  7. map.addOverlay(marker);
  8. }
  9. });

このGClientGeocoderってのが、Google Mapsが用意したジオコーディング周りの機能を提供しているクラスな訳です。詳細はドキュメントを参照。公式サンプルはこの辺

GClientGeocoderオブジェクトのメソッドとしての「getLatLng()」が住所から緯度/経度を導くインターフェイスなのね。よく似たものに「getLocations()」てのもあるけど、単にポイントが欲しいだけなら getLatLng() で良い。後者はPlacemarkオブジェクトって形で、より細かいデータが返ってくる感じ。

ちなみにコールバック関数から戻り値は(returnしても)得られなかったので、マーカー設置関係の処理はコールバック関数内でやっておく必要がありそうです。これはちょっと不便でしたね。なんとかならんものか?

感想

先に明言した通り、サンプルでは特に効率や高速化は意識していない。でもそれを置いても根本的に重そうな予感。特に測ってはいないけど、ポイント1つを特定するのに毎回クエリを投げてる訳ですからね。サンプルだと3件しか出してないからあまり顕在していないけれど、これが100件、200件となってしまった時のことは、あまり考えたくない。そもそもページ・ロードのたびに大量のクエリを投げるって、(モラルとして)どうかと思うし。

ただ、勉強にはなる。GGeocodeCache とか使うと速いみたいね~とか、ローカル検索おくだけなら数行だよな、とか関連技術が多いのでなかなか楽しめました。

関連記事

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。

6 Comments

dai wrote:
早速、有難うございます!!
いつも、感銘極まりないです!

もうあれですね。いつもお世話になってるので、
お歳暮でも贈るしかないですねw

さて、UPされてるサンプルで一つ問題が出ました。
サイドバーの項目をクリックすると、表示されるのですが、
マップ上のマーカーをクリックすると、表示されず、エラーが出てしまいます。

どうしたら、エラーを回避できますでしょうか?

コレさえ溶けたら、とりあえず、テストでxmlにデータを数百濃縮してみて、重さ等を体感してみますね。
また、その際は、報告あがります! 2007–10–24 12:14
Sig. wrote:
おぉっと、俺としたことがw
引数の渡し忘れでした。現在は修正済み~

用法/用量を守って正しくお使いください。
お歳暮は八橋(ダマレ 2007–10–24 13:50
dai wrote:
ありがとうございます。

エラーは出なくなったのですが・・・xmlの情報が吹きだしに表示されないです。

何はともあれ、お歳暮は八橋ですかw
京都出身なんで、今度、見てきますよ~

ちなみに、jsの外部ファイル化ってどうすればいいのでしょうか?

//<![CDATA[
ブラブラブラ
//]]>


の中身ブラブラをjsでまとめて、設置してみたのですが、上手い事行かず。。。
階層等も間違いないはずなんですが、gmapの場合は、不可なんでしょうか。
勉強までに、お教えいただけましたら、嬉しいです。

ちなみに、私は赤福を先日、食べてる時にあのニュースが!!
時が止まりましたw 2007–10–25 13:01
Sig. wrote:
> xmlの情報が吹きだしに表示されないです。

サンプルのですか? ん~、僕の環境では特に問題なく表示されてます。
もちょっと情報ぷり~ず。

> ちなみに、jsの外部ファイル化ってどうすればいいのでしょうか?

あぁ! サンプルは直書き用にササっと書いたので、そのままコピペでは巧くいかないですね。主に変数のスコープとか、関数の実行タイミングの問題です。
セクションごとにfunctionで包んで、変数をグローバルにしてみるとか、ちょっと手を入れないといけません。

夜、手が空いたら上げておきましょう。 2007–10–25 16:15
dai wrote:
>>サンプルのですか? ん~、僕の環境では特に問題なく表示されてます。
もちょっと情報ぷり~ず。

説明べたでスイマセン。見たままご説明すると、
読み込みは、通常通り読み込まれ、サイドバーに各スポット?が表示され、
サイドバーの書くスポットをクリックすると、噴出しマーカーに移動し、情報が表示されます。

しかし、マーカーを直接クリックすると、吹出しだけが表示され、吹出し内の情報が真っ白になっています。。。
ってか、参考にならない説明スイマセンです(初めの説明とあまり変わってない泣)

一応、IEとFirefoxで、調べましたが、どちらも表示されませんでした。
友達のPCでも見ましたが、同上でした。
ブラウザ環境も見ましたが、通常通り、javascript環境オフは、してません。

ん~お分かりになりますでしょうか?・・・

ちなみに、友達と最近よく見てるサイトがあってと、Sigさんのブログ(HP?)を見てると、
カッコイイ~センスありますよね~っと、盛り上がってました。
背景黒のサイトって以外に見難いけど、Sigさんのページは、凄い見やすいな~っと言ってました。

私もその通りだと思いますが、なんでこんな見やすいんでしょうね?
やはり、セ・ン・スなんでしょうか~
何はともあれ、今後ともも宜しくお願いします。 2007–10–25 23:15
Sig. wrote:
おーけぃ、パーフェクトです。
GClientGeocoder() がオブジェクトだってことを失念してまして、値の渡し方をミスってました。これ、ちょっと癖ありますね~。判んないとこあったら聞いてください。こちらとしては、良い勉強になりました!

外部JS化も兼ねて、修正版をUpしておきました。
http://archiva.jp/test/set/gmaps_sample/address_load2.html


> Sigさんのページは、凄い見やすいな~っと言ってました。

やった! 褒められた^^>
確かに黒は難しいです。しかし、俺にセンスなどない!
個人的に俺サイト作るなら「黒しかない」てのがあって、初めてHTMLに触れて以来の試行錯誤の結果、今はこんな感じになってます。コンセプトは「Less is More !」 2007–10–26 15:49