IE8でjQueryというかJavaScriptが動かない。

思い出したのでメモ。

とあるお仕事で管理画面を作成しました。
画面遷移させたくなかったので、画像の登録をポップアップしたウィンドウ内で行うようにしていたところ。
IE8で動作しないとクレームが。

同じような動作をさせている箇所が複数あるのに、とある機能だけポップアップするものの内容が表示されない。
※ちなみにポップアップに使用したのはjQueryプラグインの「prettyPopin」。

エラーログを見てみると「エラー 80020101」とあるのでぐぐってみると…。

来ましたコレ。
JavaScriptの動かないコード (中級編) Ajax読み込み時に「80020101」のエラー – 主に言語とシステム開発に関して

いわく

IE6,IE7では,Ajaxで読み込まれるページのJavaScriptが

<script type=”text/javascript”>
<!–
~~
//–>;
</script>

のように丁寧にコメントアウトされていると,

80020101のため操作を完了できませんでした

のエラーが表示される。

エラーの起こっているコードみたら…コメントアウトしてた…。
で、エラーの起こってないコードを見たら…コメントアウトしてない。

なんの罰ゲームですかコレ。
しかもIE8でも再現してますやん。

で、ためしにコメントタグを消してやると…。
ちゃんと動きましたよ…。

レスキューしていただいたページの最後のコメントが…。

ちなみにFirefoxでは,前者の記法でも正常に動く。Firebugも何も言わない。

これは,かなりはまる。

まさに…。どっぷりハマりました。
このエントリーがなかったら解決できていたかどうかかなり怪しいです。

ありがたやありがたや。

現在表示されている範囲内のマーカーだけ表示する[GoogleMapsAPIVersion3]+[PHP]

ずいぶん時間が経ちましたが、続きです。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
  3. XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]
  4. 表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]
  5. リストをクリックしたら情報ウィンドウを表示する[jQuery]+[GoogleMapsAPIVersion3]

前回までの作り込みでだいたいできましたが、本番で使うにはちょっと問題があります。

それはマーカーの数。

今は20個ほどですが、本来の用途では10,000弱あります。
10,000もマーカーなんかつけたら、重くて使いものになりません。(たぶん)
PCスペックによってはフリーズしてしまいそうです。

なので、ちょっと仕様変更をしなければいけません。
(さらに…)

リストをクリックしたら情報ウィンドウを表示する[jQuery]+[GoogleMapsAPIVersion3]

途中別のことをやっていて時間が空いてしまいましたが、GoogleMapsAPIです。

前回までは以下の通り。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
  3. XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]
  4. 表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]

残る仕様はひとつ。

  • リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

これ少しハマりました。
jQueryのところで。
わかってしまえばなんともないんですけどね。
(さらに…)

表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]

前回までは以下の通り。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
  3. XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]

Googleさんと先人のおかげで、マーカーと情報ウィンドウまでサクサクと出来ました。
残る仕様は二つ。

  • 現在表示されている地点データの名前を、地図の外にリストとして表示します
  • リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

今回は「現在表示されている地点データの名前を、地図の外にリストとして表示します」の方をかたづけます。
これもjQueryを使えばすごく簡単。
(さらに…)

XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]

前回までは以下の通り。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]

地図、マーカー、情報ウィンドウが表示できたら、地点情報XMLを読み込んで該当する地点にマーカーを表示させます。
完成まであと一歩といった感じでしょうか。

XMLを読み込む

XML読み込み部分を作ります。
その前に、XMLがなければどないしようもないので、以下のようなサンプルXMLを用意しました。
単純に地点の名称と、緯度経度のXMLデータです。

sample.xml

さて、肝心の読み込みですが、さっと調べてみるとjQueryが便利そうなのでコイツを使います。
jQueryは他にも色々な用途で使えるので、遅かれ早かれ導入することになるでしょう。
(さらに…)

マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]

前回の「地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]」で、地図を表示して緯度経度を取得して表示するところは終わりました。
今回は、マーカーとふきだし(情報ウィンドウというようですが、ふきだしのほうが直感的な気がしませんか?)を表示させます。

マーカーの表示と削除

今度はマーカーを表示します。緯度経度取得と順序が逆なような気がしますが、気にしません。
単純にマーカーを表示するだけなら何ともないけど、消すこと考えるとv3からはちょっと考えておかなければならないみたいです。
v2では、
map.clearOverlays();
一発で追加したマーカーが消えたらしいのですが、v3で廃止になったとの事です。
なので配列で表示したマーカーを全部持っておかないとダメみたいです。
(さらに…)

地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]

都道府県別に集められた地点データ群を使って、以下のようなページをつくらなければならなくなりました。

  • とある目的で収集された地点データを扱います
  • 地点データはXML形式で渡されます
  • 地点データをgooglemap上にマーカーとして表示させます
  • マーカーをクリックすると地点データがふきだし(情報ウィンドウというらしい)で表示されます(名前など)
  • 現在表示されている地点データの名前を、地図の外にリストとして表示します
  • リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

単純に地図を表示するだけなら触った事がありますが、GoogleMapsAPIを使って色々やるのは初めてです。
GoogleMapsAPIを調べながらゴリゴリと書いていきます。

GoogleMapsAPIVersion3で地図を表示する

まずはコレができないと話になりません。
さっさと済ませます。
(さらに…)