Google MAPS JavaScript APIでのデバッグ

日本語コードに注意する

一番最初につまずくのは恐らく日本語の扱いだと思われます。 Google MAPS JavaScript APIを使っているページは基本的に全てUTF8でなければなりません。

例えばWindowsのnotepadなどでページを作成していると自動的にSJISになってしまい、Google MAPS JavaScript APIが動作しない場合があります。

文字コードに関連する動作はブラウザ依存する場合があるので、注意が必要です。 例えばFirefoxだと動作するけどIEだとGoogle MAPS JavaScript APIが起動できないといったことが良く発生します。 Google MAPS JavaScript APIに関してはFirefoxの方がIEよりも動作が安定している感じがします。 （きっと使う機能に依存するのでしょうが。）

この問題の解決方法としては、1) 全てUTF-8で書く、2) Google MAPS JavaScript APIを含む部分だけを別HTMLにしてiframe表示をする、3) 英語(ascii文字)だけで書く、などがあります。 (ascii文字だけだとUTF-8と全く同じになるので方法3は方法1であると言えますが、多分、普通はUTF-8とascii文字のマッピングと言われても興味が無いと思われるので分けてみました。)

本サイトでは、方法2を採用しました。 方法2を使っている理由は、「既に他のページをSJISで作ってしまっていて、ここだけUTF-8で書くのが面倒だから」です。 iframeでHTMLを分けてしまう方法に関しては「Google Maps JavaScript APIの単純な例」で説明しているので、そちらをご覧下さい。 iframeで分けてしまえば、本体ページはSJISでもEUCでもJISでも大丈夫です。

Google MAPS JavaScript APIを使っているHTML内でUTF8を使わずに日本語を表示するには、「&#数値;」で表現するという方法もあります。 日本語の文字列を変換するツールを作ってみたので、もしよろしければこちらをご利用下さい。

エラーを発生させている箇所を知る

これは、どちらかというとGoogle MAPS JavaScript APIというよりもJavaScriptでのデバッグTIPSに近いです。 JavaScriptでプログラムを書いていると「何故か動かない、何故かエラーになる、どこでエラーになっているかわからない」という状況になりがちです。 「どこが悪いか」がわかればデバッグがずっと効率的になります。

IEでJavaScriptのエラーを表示するには「ツール > インターネットオプション > スクリプトのエラー毎に通知する」にチェックをします。 このチェックを入れると「どこが悪いのか」ということがわかるようになります。 また、必要に応じて「ツール > インターネットオプション > スクリプトのデバッグを使用しない」のチェックを外すのも良いでしょう。

Firefoxの場合には「ツール > JavaScriptコンソール」を選択して、JavaScriptコンソールを表示します。 このコンソールにはJavaScriptのエラーなどが表示されます。 結構便利です。

試しているコードが最新かどうか確認する

何度も同じページにあるJavaScriptを試していると、ブラウザがJavaScriptをキャッシュしていて実は昔のプログラムを何度も試したいたということがあります。 「何か変だな」と思ったら、ブラウザのキャッシュを削除したり、ブラウザからソースコードを表示して最新かどうか確認する、などの作業をお勧めいたします。

試行錯誤して慣れる

とりあえず、おおまかに私が使っているデバッグ方法を書きましたが、とりあえず試行錯誤して慣れるのが近道かもしれません。