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" のリンクをクリックして下さい。）

+ expand sourceview plainprint?

1. <style>  
2. .slippymap img { padding: 0px !important; border: none !important;}  
3. </style>  
4. <!-- bring in the OpenLayers javascript library -->  
5. <script src="http://openlayers.org/api/OpenLayers.js"></script>  
6. <!-- bring in the OpenStreetMap OpenLayers layers. Using this hosted file will make sure we are kept up to date with any necessary changes. -->  
7. <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>  
8.   
9. <script type="text/javascript"><!--  
10. // Blogger Slippy Map 0.1.1  
11. var i = 0;  
12. var lat = 54;  
13. var lon = 0;  
14. var z = 4;  
15. var style = "width:300px; height:200px;";  
16. var element1, element2, element3, text;  
17. var tags = document.getElementsByTagName("div");  
18.   
19.   for ( var j=0; j < tags.length; j++ ) {  
20.   
21.     if ( tags[j].className == "slippymap" ) {  
22.   
23.       i++;  
24.   
25.       if ( tags[j].getAttribute("lat") ) {  
26.          lat = tags[j].getAttribute("lat");}  
27.       if ( tags[j].getAttribute("lon") ) {  
28.          lon = tags[j].getAttribute("lon");}  
29.       if ( tags[j].getAttribute("z") ) {  
30.          z = tags[j].getAttribute("z");}  
31.       if ( tags[j].getAttribute("style") ) {  
32.          style = tags[j].getAttribute("style");}  
33.   
34.       element1 = document.createElement("div");  
35.       element1.setAttribute("class","tempmap");  
36.       element1.setAttribute("style","margin-bottom:-35px;");  
37.       <!-- define a DIV into which the map will appear -->  
38.       element2 = document.createElement("div");  
39.       element2.setAttribute("id", "map" + i);  
40.       element2.setAttribute("style", style   
41.         + " border-style:solid; border-width:1px; border-color:#000;");  
42.       element1.appendChild(element2);  
43.       element2 = document.createElement("br");  
44.       element1.appendChild(element2);  
45.       element2 = document.createElement("span");  
46.       element2.setAttribute("class","tempmap")  
47.       element2.setAttribute("style",  
48.         "font-size:70%; background-color:white; position:relative;top:-65px;left:5px;z-index:1003;");  
49.       text = document.createTextNode("Data by ");  
50.       element2.appendChild(text);  
51.       element3 = document.createElement("a");  
52.       element3.setAttribute("href","http://www.openstreetmap.org/?lat=" + lat   
53.         + "&lon=" + lon + "&zoom=" + z );  
54.       element3.setAttribute("title","See this map on OpenStreetMap.org");  
55.       text = document.createTextNode("OpenStreetMap");  
56.       element3.appendChild(text);  
57.       element2.appendChild(element3);  
58.       element3 = document.createElement("br");  
59.       element2.appendChild(element3);  
60.       element3 = document.createElement("a");  
61.       element3.setAttribute("href","http://creativecommons.org/licenses/by-sa/2.0/");  
62.       element3.setAttribute("title","Creative Commons Attribution-Share Alike 2.0");  
63.       text = document.createTextNode("CC-BY-SA-2.0");  
64.       element3.appendChild(text);  
65.       element2.appendChild(element3);  
66.       element1.appendChild(element2);  
67.       tags[j].appendChild(element1);  
68.   
69.       eval("var lat"+ i + "=" + lat + "; var lon"  
70.         + i + "=" + lon + "; var zoom"+ i + "=" + z + "; var map" + i  
71.         + "; function lonLatToMercator(ll) { var lon = ll.lon * 20037508.34 / 180; "  
72.         + "var lat = Math.log (Math.tan ((90 + ll.lat) * Math.PI / 360)) / "  
73.         + "(Math.PI / 180); latlat = lat * 20037508.34 / 180; return new "  
74.         + "OpenLayers.LonLat(lon, lat); } ;"  
75.         + "if (typeof window.addEventListener == 'function') { "  
76.         + "window.addEventListener('load', init, false);} else if (typeof "  
77.         + "window.attachEvent == 'object') { window.attachEvent('onload', "  
78.         + "init);} else { var oldonload = window.onload ; if (typeof "  
79.         + "window.onload != 'function') { window.onload = init;} else { "  
80.         + "window.onload = function() { oldonload(); init(); } } };"  
81.         + "function init() { map" + i + " = new OpenLayers.Map('map" + i   
82.         + "', { controls:[ new OpenLayers.Control.Navigation()"  
83.         + ", new OpenLayers.Control.PanZoom(), new OpenLayers.Control"  
84.         + ".LayerSwitcher()], maxExtent: new OpenLayers.Bounds(-20037508.34, "  
85.         + "-20037508.34, 20037508.34, 20037508.34), maxResolution:156543.0399, "  
86.         + "units:'meters', projection: 'EPSG:900913' } ); var mapnik = new "  
87.         + "OpenLayers.Layer.OSM.Mapnik('Mapnik'); map" + i + ".addLayer(mapnik);"  
88.         + " var osmarender = new OpenLayers.Layer.OSM.Osmarender('Osmarender'); "  
89.         + "map" + i + ".addLayer(osmarender); var cyclemap = new OpenLayers"  
90.         + ".Layer.OSM.CycleMap('Cycle Map'); map" + i + ".addLayer(cyclemap); "  
91.         + "var maplint = new OpenLayers.Layer.OSM.Maplint('Maplint'); map" + i   
92.         + ".addLayer(maplint); var lonLat" + i + " = lonLatToMercator(new "  
93.         + "OpenLayers.LonLat(lon" + i + ", lat" + i + ")); map" + i   
94.         + ".setCenter (lonLat" + i + ", zoom" + i + "); } ");  
95.     }  
96.   }  
97. --></script>  

<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... ]