Google Mapsで提供されている地図を自分のウェブサイトやアプリケーションに組み込んだり、その地図上に独自の情報を表示したりすることを可能にするサービス「Google Maps API」。最近流行りの「Web 2.0」や「マッシュアップ」といった言葉の浸透とともにGoogle Maps APIを利用するウェブサイトも増加の一途を辿っています。
しかし、このAPIで提供されるサンプルコードをそのまま利用した場合にFirefoxやMozilla、Operaなどのブラウザでは正しく表示できるのに、Internet Explorer(以下、IE)では「開けません。 操作は中断されました」といったエラーを吐いてしまい、正しく表示できない場合があります。原因はIEのバグ…というかセキュリティ仕様上コードの解釈が他のブラウザと大きく異なってしまっているのが原因のようなのですが、このまま放っておくわけにもいかないので対応を検討してみることに。
とりあえずGoogleで検索してみると<head>内に移動した<script>を<body>タグのonloadでコールする、といった解ばかり。無論これでも正しく動作はしますが、<head>や<body>タグを編集できないブログなどのサービスではこういった対応が出来ませんし、仮に編集可能な場合でもこれらの部分は全ページ共通にしているのであまり触りたくない…といった人も居るでしょう。
そこで今回提案する対応策は「prototype.js」を使う方法。「prototype.js」はSam Stephenson氏によって書かれたJavaScriptライブラリで、リッチ＆インタラクティブなウェブページを制作する際に大変便利なスクリプトです。これを使ってIEでの動作不具合の解消を図ってみましょう。
1．prototypeのウェブサイトから「prototype.js」をダウンロードし、自分のウェブサイトにアップロードしておく。
2．最後にGoogle Maps API用のソースを下記のように少しばかり修正。
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript"
src="http://maps.google.co.jp/maps?file=api&v=1&key=(あなたのKey)"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function () {
(中略)
});
//]]>
</script>これだけ。簡単でしょ？