Slippy MapウィジェットがIE6でも動くようになりました

Firefox3とSafari3では動いたのにIE6では動かなかった Blogger Slippy Mapウィジェット がIE6でも動くようになりました。（稼動確認したPCはWindowsXP SP3とSP2です。）

何箇所か alert を入れてみて何となく悪そうな場所は分かったのですが、そこから先は Visual Web Developer 2008 Express Edition をインストールしても分かりませんでした。（これはデバッグツールの使い方自体良く分かっていないせいだと思います。）

また検索を繰り返し、次のページに辿り着いて漸く分かりました。

• OKWave : JavaScriptでJavaScriptを追加したいです。

そこに書かれていた原因とは「ＩＥの場合、動的にスクリプトエレメント（<script></script>）にテキストの追加は、できないようです。」ということで、解決策は「動的に関数を作成したいとかそういうことなら、文字列として、関数を構成してeval すればいいです。（script タグを追加する必要はない）」でした。

で、 eval とやらをしてみました。
IEのためのコードを追加しなければならないのかと思っていたので助かりました。普段からJavaScriptを書いている人には当たり前のことなんだろうなぁ（汗

今回のコード（IE6対応版）はこちら。（ "+ expand source" のリンクをクリックして下さい。）

<style>
.slippymap img { padding: 0px !important; border: none !important;}
</style>
<!-- bring in the OpenLayers javascript library -->
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. -->
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>

<script type="text/javascript"><!--
// Blogger Slippy Map 0.1.1
var i = 0;
var lat = 54;
var lon = 0;
var z = 4;
var style = "width:300px; height:200px;";
var element1, element2, element3, text;
var tags = document.getElementsByTagName("div");

  for ( var j=0; j < tags.length; j++ ) {

    if ( tags[j].className == "slippymap" ) {

      i++;

      if ( tags[j].getAttribute("lat") ) {
         lat = tags[j].getAttribute("lat");}
      if ( tags[j].getAttribute("lon") ) {
         lon = tags[j].getAttribute("lon");}
      if ( tags[j].getAttribute("z") ) {
         z = tags[j].getAttribute("z");}
      if ( tags[j].getAttribute("style") ) {
         style = tags[j].getAttribute("style");}

      element1 = document.createElement("div");
      element1.setAttribute("class","tempmap");
      element1.setAttribute("style","margin-bottom:-35px;");
      <!-- define a DIV into which the map will appear -->
      element2 = document.createElement("div");
      element2.setAttribute("id", "map" + i);
      element2.setAttribute("style", style 
        + " border-style:solid; border-width:1px; border-color:#000;");
      element1.appendChild(element2);
      element2 = document.createElement("br");
      element1.appendChild(element2);
      element2 = document.createElement("span");
      element2.setAttribute("class","tempmap")
      element2.setAttribute("style",
        "font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;");
      text = document.createTextNode("Data by ");
      element2.appendChild(text);
      element3 = document.createElement("a");
      element3.setAttribute("href","http://www.openstreetmap.org/?lat=" + lat 
        + "&lon=" + lon + "&zoom=" + z );
      element3.setAttribute("title","See this map on OpenStreetMap.org");
      text = document.createTextNode("OpenStreetMap");
      element3.appendChild(text);
      element2.appendChild(element3);
      element3 = document.createElement("br");
      element2.appendChild(element3);
      element3 = document.createElement("a");
      element3.setAttribute("href","http://creativecommons.org/licenses/by-sa/2.0/");
      element3.setAttribute("title","Creative Commons Attribution-Share Alike 2.0");
      text = document.createTextNode("CC-BY-SA-2.0");
      element3.appendChild(text);
      element2.appendChild(element3);
      element1.appendChild(element2);
      tags[j].appendChild(element1);

      eval("var lat"+ i + "=" + lat + "; var lon"
        + i + "=" + lon + "; var zoom"+ i + "=" + z + "; var map" + i
        + "; function lonLatToMercator(ll) { var lon = ll.lon * 20037508.34 / 180; "
        + "var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / "
        + "(Math.PI / 180); lat = lat * 20037508.34 / 180; return new "
        + "OpenLayers.LonLat(lon, lat); } ;"
        + "if (typeof window.addEventListener == 'function') { "
        + "window.addEventListener('load', init, false);} else if (typeof "
        + "window.attachEvent == 'object') { window.attachEvent('onload', "
        + "init);} else { var oldonload = window.onload ; if (typeof "
        + "window.onload != 'function') { window.onload = init;} else { "
        + "window.onload = function() { oldonload(); init(); } } };"
        + "function init() { map" + i + " = new OpenLayers.Map('map" + i 
        + "', { controls:[ new OpenLayers.Control.Navigation()"
        + ", new OpenLayers.Control.PanZoom(), new OpenLayers.Control"
        + ".LayerSwitcher()], maxExtent: new OpenLayers.Bounds(-20037508.34, "
        + "-20037508.34, 20037508.34, 20037508.34), maxResolution:156543.0399, "
        + "units:'meters', projection: 'EPSG:900913' } ); var mapnik = new "
        + "OpenLayers.Layer.OSM.Mapnik('Mapnik'); map" + i + ".addLayer(mapnik);"
        + " var osmarender = new OpenLayers.Layer.OSM.Osmarender('Osmarender'); "
        + "map" + i + ".addLayer(osmarender); var cyclemap = new OpenLayers"
        + ".Layer.OSM.CycleMap('Cycle Map'); map" + i + ".addLayer(cyclemap); "
        + "var maplint = new OpenLayers.Layer.OSM.Maplint('Maplint'); map" + i 
        + ".addLayer(maplint); var lonLat" + i + " = lonLatToMercator(new "
        + "OpenLayers.LonLat(lon" + i + ", lat" + i + ")); map" + i 
        + ".setCenter (lonLat" + i + ", zoom" + i + "); } ");
    }
  }
--></script>

しかし...
Firefox3とSafari3ではクレジットとライセンスが地図の枠内に収まるのに、IE6では枠外に出てしまうな。
良く見るとIE6では枠の線も表示されてないよ。
まっ、いっかぁ～。とりあえず動くようになったし。

あと、あんまり地図を貼り付けるとページの動きが遅くなりますね。当たり前か。

   [ More... ]