BLOGに地図を！

このサイトでも、たまにお店の紹介とかで BLOG に地図を貼り付けたりしてるんだけど、毎回いろいろ手動でゴチャゴチャやるのも面倒。
そこで、地図を表示するためのタグを簡単に作成するスクリプトを書いてみた。
まえにちょこっと紹介したけど、一応使えるレベルのブラッシュアップも終わったんで再公開。
利用できるのは、下記の３種類のＭＡＰ。
何れも、小地図（200×200）で位置表示し、クリックすると、位置をマークした印刷用地図を開くようになっている。
（小地図のサイズは、設定で変更可能）

１，Yahoo Map を利用した BLOG用地図のソース自動生成

２，Google Map を利用した BLOG用地図のソース自動生成

３，Goolge Map Api を利用した BLOG用地図のソース自動生成

１，２ は、ちょっとライセンス的にどうかと思ったのだけど、あちこちのサイトで使われてるみたいなんで、まぁ大丈夫かな。
（一応、利用は自己責任でってことで）
この２つは、どんな BLOG でも設定等を全くしなくて利用できるタイプで、とても簡単に利用できる。

３は、小地図で Google Map のコントローラとか使えて、スケールリサイズやドラッグによる地図の移動が出来る。
ただし、利用するには、事前に Goolge Maps Api key を取得する必要がある。（無料）
そして、BLOG のテンプレート等にスクリプトを登録しないとダメ。
設定方法等は、ソース自動生成のページに書いてあるので読んでね。
無料の FC2 BLOG に設定してみたので、どんな感じになるかは、こちらのサンプルを見てね。

ちょっと技術的な話。

実は Google Map Api を利用する方法はかなり悩んだのだ。
最初は、ソース生成で Map を作画するスクリプトそのものをはき出すようにしたんだけど、どうもネストした Div タグの中でこれをやると、Firefox だとオッケーなんだけど、IEがコケる。
BLOGサイトなんて、Div タグはネストしまくりだし…

ネットで情報を探してみると、どうやら IE の場合、Map作画用スクリプトは <head> に記述しないとダメらしい。
BLOG の場合、当然地図は１つだけってことは無いので、複数あった場合、その数分の作画スクリプトを <head> 挿入するのも芸が無い。
（というか、後付のスクリプトで動くのか…）

悩んだ末
逆転の発想で、Map を作画する Div タグに、地図作画用のパラメタを書き込み、これを非表示にしておいて、あとからこの Map用 Div タグを検索し、<head> に記述した地図作画用関数で作画しちまえばオッケーのはずだ。
（onLoad で、Map用 Div タグを検索して実際のマップに書き換える ）
自分の BLOG で試すのもなんだし、とりあえず FC2 BLOG で試してみる。

たしかに、Firefox ではうまくいった。
でも、あいかわらず IE がダメ…

なんで？？

そこでハタと気が付く。
FC2　って、キャラクタセットが「EUC-J」でねの？
ためにし、Google map 作画用スクリプトに「charset="utf-8"」を付加してみた。
（Google map api は UTF-8 を前提としている）

ばっちりだ。

この Google map api 系、なにが面倒かって、Maps api key って、サイトで登録するんで、ローカルでのテストが出来ない。
毎回サーバにアップしなきゃならんのだ。
とくに IE なんて、スクリプトのデバッグ環境が貧弱なんで余計面倒。
しかも、Firefox では上手くいくのに、IE がダメってのがシバシバだし。

ともかく、なんとかうまくいった。
さて、もう寝よっと。

追記：2007.01.31
動作確認は、「Firefox 2.0」「IE6/IE7」「NN7.1」「Opera9.10」でオッケー。
Google map api を利用したサンプルとして、忍者ブログでも利用してみました。

追記：2007.02.01
Google map api で地図を BLOG に貼り付けるための FC2 BLOG用プラグインも書いてみました。
FC2 使ってる人はテンプレートの修正無しで、簡単に Google map api の地図が利用できるようになります。

追記：2007.02.02
「ブログパーツをさがせ」で、この地図ツールを紹介して頂きました。
はい、もちろん強引にメールを送りつけて（笑）
僕の説明よりはるかに分かり易い解説なんで、そちらも参照してみて下さい。