First Creation ： 2006/09/21
Last Update: 2006/11/30
Google Maps を知らない人は初級の烙印を押されるほど知名度の高いページである。何の初級かは知らないが。
Google マップ
何ヶ月か前に Google Maps のページを作ったのはいいが、地図が見れたり見れなかったりする現象に悩まされてそのまま忘れてしまった。最近、その原因と言うか根本的な対処方法に気がついたので、メモっておくことにする。
色々なページで紹介されているので、ダイジェストで紹介する。
Sign up for the Google Maps API で Google Maps API Key を入手する。
条件としては、自分のレンタルスペースを持っていること。Google アカウントを持っていること。
ex. http://www.hogehoge.com/suzuki/accessmap.html というページを作りたいのであれば、上記リンク先に「http://www.hogehoge.com/suzuki/」と入力して API Key を取得する。
Google アカウントの画面に遷移するので、アカウントを持っている人はそのままログインする。
持っていない人は申し込みをする（同じ画面の「今すぐアカウントを作成 」から）。確かメールアドレスと、任意のパスワードを設定するだけで取れるはず。
API Key の申し込みは次のページで完了する。
Thank you for signing up for a Google Maps API key!
の文字とともに API Key が表示される。
英語なので API Key だけ見て後の情報は意識から削除してしまいそうだが、実は、サンプル的な HTML ソースも表示されるので、ソースをそのままコピーしてメモ帳に貼り付け、保存する。
保存の際は、ファイルの種類を「すべてのファイル」に、文字コードは「UTF-8」に、ファイル名は accessmap.html 等にする。
そのファイルをアップロードして、URL にアクセスすればカリフォルニア州パロアルト付近の画像が表示されるはずだ。地図をぐりぐりドラッグすればマウスに応じて地図も動く。
アメリカの地図が出てきてもしょうがないので、日本の地図を表示させることにする。
使いやすいのは GoogleMapsEditor だ。解凍して GoogleMapsEditor.exe を立ち上げる。
「位置情報編集」タブを開いて、適当な住所を入力。
この場合は仙台駅の住所である「宮城県仙台市青葉区中央1丁目1-1」を入力して「位置判定」をクリックした。
地図確認にチェックが入っていれば「Webブラウザ」タブが開いてしまうが、「位置情報編集」に戻れば、ちゃんと座標が取得できているはずだ。
問題なければ「登録・修正」ボタンをクリックする。
「地図データ生成」に戻って、API Key 、地図サイズの変更、入れたければ地図の情報などを入力し、「地図データ生成」ボタンをクリックする。
ファイルを保存する画面になるので、適当な場所にファイルを保存、自分のレンタルサーバにアップロードする。
仙台駅周辺の地図が表示された。デフォルトと違うのは、左側に地図の縮尺を変える GUI ( 定規みたいなメモリがついてるでしょ？ ) がついたこと。また、地図の中央にある人魂を反対にしたようなマークは、仙台駅の場所を表している。
Google Maps のページは UTF-8 で保存すること。これは鉄則である。
Shift-JIS などでページを作って、何だ、見れるじゃない。じゃ、これでいいや、などと思って後から見てみると、ソースをまったくいじってないにもかかわらず、地図が表示されなくなっていて、うそだろ Hack されたのかよおおぉという被害妄想に陥ってしまう可能性がある。
この状態に陥ってしまうと、 Google Maps Editor で作ったページだけでなく、 API Key を取得する際に表示されるサンプルも NG になる。
そのうち Google Maps が死んでるかもしれないと現実逃避する。いくらなんでも頻繁に起こりすぎだから、これはあり得ない。
ネットワーク環境に依存する可能性に気がつく。それをあざ笑うかのように、同じパソコン、同じブラウザを使っていても、他のサイトの地図はちゃんと表示できていたりする。別のブラウザを使ったりしてもダメ。
しまいにはアップ先サーバの全ポートを開放してみたり、 HTML ソースをいじって GBrowserIsCompatible() でデバッグを始めてしまう。原因が分かった今だから言えるが、アフォである。
今日たまたま Google Maps のページを見ていたら、 UTF-8 で保存するか iframe を使わないと見れたり見れなかったりするという情報を見つけて胸のつかえが下りた。根本的な理由はそこだったか。なまじ他の文字コードで見れてしまい、たまに見えなくなったりするものだから、文字コードが原因じゃないよなぁとか思い込んでしまった。
( 冷静に考えれば、それが UTF-8 であろうがなかろうが、ソースも変えてないのに見えたり見えなくなったりすると言うこと自体おかしいのだが )
iframe を使う方法と言うのは、 Google Maps のページだけは UTF-8 で作っておいて、別のページで読み込ませると言うような手法だろう。試していないので推測でしかないが、多分あっているはず。仮にそのページを EUC あたりで保存しても OK ということなら、API Key 取得時に表示されるサンプルページ ( 最小限のソース ) が NG になるのはおかしい。
GBrowserIsCompatible は Google Maps が動作するブラウザかどうか判断する関数なので、同じブラウザを使っていても False になるというのは、動作環境ではなく、別の原因があると考えられる。今までのことから、UTF-8 でやり取りしているからだと推測できる。
であれば、EUC あたりでソースを作ったとしても、Google Maps のサーバに送るデータを UTF-8 化すればよいわけだ。 API Key 取得時の最小サンプルで、サーバに送るデータと言えば
<script src="http://maps.google.com/maps?file=api&v=2&key=取得したAPIキー" type="text/javascript"></script>
これを UTF-8 にすればいいのだろうか。
<script src="http://maps.google.com/maps?file=api&v=2&key=取得したAPIキー" type="text/javascript" charset="utf-8"></script>
それでこのようにしたら OK だった。
と思ったら charset="utf-8" を外しても OK だった。たまたま表示できる時期になったのかもしれない。後で検証が必要だ。
ようやく見つけたこの手法も、 Google Maps と UTF-8 で検索すればいたるところで Hit する。あー UTF-8 というキーワードさえ分かっていれば・・・だって他の文字コードでも見れたんだからそれが原因ってのはおかしいだろうぶつぶつ・・・
ちなみにこの手法でも NG であれば、Escape Codec Library: ecl.js のスクリプトを拝借して何とかしてみようかとも思う。そんな苦労するより素直に UTF-8 で作れって思うのは気のせいだから気にしてはいけない。
charset="utf-8" を入れれば、高確率で見れることが分かった。しかし見られない場合もあった。
UTF-8 で保存したページであるにもかかわらず、 Sleipnir だと見れず、 IE でアクセスしたら OK という現象に悩まされている。
どないせーちゅーんじゃ。
