Google Mapsをブログに貼ってみる、超微妙にアップグレード、あとGoogle Date Map（笑）

Google Maps->Blogをまたしても超微妙にアップグレード。メッセージのタブのON/OFF機能がつきました。
と言っても偉いのはGoogle MapsとHackしたKscさん（KsGMapの作者の方）なので、私は何もしておりません。例によって例のごとく、成果物をパクっただけです。Kscさん、有難う御座いました。
なお、デフォルトでタブがONになるようにしているので、嫌な方はタブの指定をOFFにして貼り直してください。
お知らせのため、利用して戴いている方々には、ブログへのリンクなしトラックバックを打たせて戴いています。迷惑であれば消してください。

注：より簡単にGoogle Mapsをブログに貼れる「G2Gmap」もあわせて御確認下さい！

また、Geocoding.jpさんがREST APIを公開されましたので、前回同様、JSONで利用できるモノを作って見ました。下記リンク先のjsファイルがそれです。
http://www.got2do.com/api/geocoder.js

Google-Maps-API-Japanグループにも投稿してますが、同じものをブログにもアップ。
使い方は下記のとおりです（Google Maps APIの基本的な使い方は割愛）。

【geocoder.jsをインクルード(HTML）】

<script src="http://www.got2do.com/api/geocoder.js"

charset="utf-8"></script>

【初期化（JavaScript）】

map = new Gmap(...) → Google Maps APIの初期化

...

handleGmap(Gmapインスタンス,ローディングメッセージ用ID,

ローディングメッセージ,検索結果表示用ID);

• Gmapインスタンス：Gmapインスタンスを指定します（上記例だとmap）。
  
• ローディングメッセージ用ID：HTML中の、ローディングメッセージを表示したい箇所のIDを指定します。デフォルトは"message"です。指定IDを持つ要素が見つからない場合、ローディングメッセージは表示されません。
  
• ローディングメッセージ：ローディング中のメッセージを指定します。デフォルトは"...Loading..."です。
  検索結果表示用ID：HTML中の、検索結果を表示したい箇所のIDを指定します。デフォルトは"message"です。指定IDを持つ要素が見つからない場合、検索結果は表示されません。

【検索&マップ移動（JavaScript)】

keyToGmap(encodeURI(キーワード));

keyToGmap関数にUTF8でエンコードしたキーワードを渡すと、検索結果（緯度経度）をもとに、初期化した際に指定したGmapインスタンスの位置を移動します。検索結果が複数の場合、初期化時に指定したIDの箇所に検索結果を表示します。

下記にサンプルを作りましたのでご参照ください。
http://www.got2do.com/lab/gm_geocoder.htm
http://teddyg.fc2web.com/

CGIやPHPの使えないfc2webでもちゃんと使えていることがおわかりかと思います。なお、「5秒に1度」をなるべく実現できるよう、Submitボタンをクリック後にdisable=trueにし、地図移動後にdsable=falseに戻すようにしております。この辺は下記を参考にしております。
http://d.hatena.ne.jp/naoya/20050803/1123053496

また、サンプルの下のほうにある「Bookmarklet」を任意のWebサイト上でキーワードを選択の上実行すると、上記サンプルサイトに飛びます。ちょっと変えてgeocoding.jp本家に飛ばすようにしたのがこちらのBookmarkletです。
上記JavaScript関数は、Google Maps API同様、サーバ上にXMLファイルや他のプログラム等を要さずに利用できますので、例えば、

<a href="#" onClick="keyToGmap('東京タワー')">東京タワー</a>

のようにHTML文中に埋め込むこともできます…というわけで作ったのがこいつ。

Google Date Map (fc2web版はこちら）

こいつはヤバイ。何がやばいって文章がヤバイ。こんなものを帰りの電車で書いてる自分がなおヤバイ。
ちなみにお台場という場所をよく理解しないままにお台場デートマップを参考に文章を書いているので、実際の位置関係をまったく考慮してません。なお、店名など、検索結果がゼロになるものもありますが、敢えてそのままにしています。
ポイントとしては、文中の<A>タグにonClick=...などと書かず、id="gm"とIDを振るだけでkeyToGmap関数にリンク元のテキストをキーワードとして渡しているところでしょうか。この辺は、傭兵日記さんのこのエントリにあった、del.icio.usの仕組みを真似ています。HTMLの作法的には、ID属性よりTitle属性にした方がいいかもしれません。
こういう使い方をすると、これまでHTML一枚で書いていた旅行記だとか地域の紹介サイトだとかが一瞬にしてGoogle Mapsを活用したクールなサイトになるんじゃないかなあ、などと言ってみるテスト。