Changeset 285 for kml2gmaps/trunk

Show
Ignore:
Timestamp:
10/26/05 15:45:19 (3 years ago)
Author:
ogawa
Message:

Code cleanup.

Files:
1 modified

Legend:

Unmodified
Added
Removed

  • kml2gmaps/trunk/kml2gmaps.html

    r284 r285  
    44    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    55    <title>kml2gmaps.html: Maps KML file onto Google Maps</title> 
    6     <style>h1 { font-size: 14px; } body, input { font-size: 12px; font-family: verdana,arial,sans-serif; } #meta li { list-style-type: none; }</style> 
     6    <style> 
     7h1 { font-size: 14px; } 
     8body, input { font-size: 12px; font-family: verdana,arial,sans-serif; } 
     9ul#menu { margin: 0 0 0 20px; padding: 0; } 
     10#menu li { list-style-type: none; cursor: pointer; margin: 0; padding: 2px; } 
     11#menu li img { vertical-align: middle; } 
     12div.popup { width: 18em; } 
     13.footer { clear: both; font-size: 10px; padding-top: 10px; } 
     14</style> 
    715    <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAA2SGB7kYAwJ7vNIiGUvsYgBQhPSrtY3c-aq-G7Tm93zGQQxtL5xTnwm2_6ZCVnME0pZzKvB7i8npggw" type="text/javascript"></script> 
    816    <script type="text/javascript"> 
    … …  
    103111    //]]> 
    104112    </script> 
     113  </head> 
     114  <body> 
     115    <h1>Maps KML file onto Google Maps <small>(SEE ALSO <a href="http://as-is.net/blog/archives/001032.html">http://as-is.net/blog/archives/001032.html</a>)</small></h1> 
     116    <div id="map" style="width:600px;height:400px;float:left;"></div> 
     117    <div style="width:300px;float:left;"><ul id="menu"></ul></div> 
     118    <p class="footer">Written by <a href="http://as-is.net/blog/">Hirotaka Ogawa</a>. Powered by <a href="http://www.google.com/apis/maps/">Google Maps API</a> and nene-san's Datum-shift code (<a href="http://kokogiko.net/georss-gmaps.cgi?src=1">http://kokogiko.net/georss-gmaps.cgi?src=1</a>).</p> 
    105119    <script type="text/javascript"> 
    106120    //<![CDATA[ 
    107     function onLoad() { 
    108       var baseIcon = new GIcon(); 
    109       baseIcon.image = "http://www.google.com/mapfiles/marker.png"; 
    110       baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 
    111       baseIcon.iconSize = new GSize(20, 34); 
    112       baseIcon.shadowSize = new GSize(37, 34); 
    113       baseIcon.iconAnchor = new GPoint(9, 34); 
    114       baseIcon.infoWindowAnchor = new GPoint(9, 2); 
    115       baseIcon.infoShadowAnchor = new GPoint(18, 25); 
     121    var baseIcon = new GIcon(); 
     122    baseIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 
     123    baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 
     124    baseIcon.iconSize = new GSize(12, 20); 
     125    baseIcon.shadowSize = new GSize(22, 20); 
     126    baseIcon.iconAnchor = new GPoint(6, 20); 
     127    baseIcon.infoWindowAnchor = new GPoint(5, 1); 
     128       
     129    var map = new GMap(document.getElementById("map")); 
     130    map.addControl(new GLargeMapControl()); 
     131    map.addControl(new GMapTypeControl()); 
    116132 
    117       var tinyIcon = new GIcon(); 
    118       tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; 
    119       tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; 
    120       tinyIcon.iconSize = new GSize(12, 20); 
    121       tinyIcon.shadowSize = new GSize(22, 20); 
    122       tinyIcon.iconAnchor = new GPoint(6, 20); 
    123       tinyIcon.infoWindowAnchor = new GPoint(5, 1); 
    124        
    125       var map = new GMap(document.getElementById("map")); 
    126       map.addControl(new GLargeMapControl()); 
    127       map.addControl(new GMapTypeControl()); 
    128        
    129       function createMarker(point, index, name, desc) { 
    130         var letter = String.fromCharCode("A".charCodeAt(0) + index); 
    131 //      var icon = new GIcon(baseIcon); 
    132 //      icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png"; 
    133         var icon = tinyIcon; 
    134         var marker = new GMarker(point, icon); 
    135         var msg = name ? '<b>' + name + '</b>' + (desc ? '<br>' + desc : '') : 
    136                          'Marker <b>' + letter + '</b>'; 
     133    var menu = document.getElementById("menu"); 
     134    function createMarker(point, index, name, desc) { 
     135      var letter = String.fromCharCode("A".charCodeAt(0) + index); 
     136      var marker = new GMarker(point, baseIcon); 
     137      var msg = name ? '<b>' + name + '</b>' + (desc ? '<p>' + desc + '</p>' : '') : 'Marker <b>' + letter + '</b>'; 
     138      msg = '<div class="popup">' + msg + '</div>'; 
    137139 
    138         GEvent.addListener(marker, "click", function() { 
    139           marker.openInfoWindowHtml(msg); 
    140         }); 
    141         return marker; 
     140      var li = document.createElement("li"); 
     141      li.innerHTML = '<img src="' + baseIcon.image + '"> ' + name; 
     142 
     143      var f = function() { marker.openInfoWindowHtml(msg); li.style.background = '#DDE'; }; 
     144      var g = function() { li.style.background = 'transparent'; } 
     145      GEvent.addListener(marker, "click", f); 
     146      GEvent.addListener(marker, "infowindowclose", g); 
     147      li.onmousedown = f; 
     148      li.onmouseover = function() { li.style.marginLeft = '2px'; } 
     149      li.onmouseout = function() { li.style.marginLeft = '0px'; } 
     150 
     151      menu.appendChild(li); 
     152      return marker; 
     153    } 
     154 
     155    var request = GXmlHttp.create(); 
     156    var url = window.location.search; 
     157    var i = url.indexOf('?url='); 
     158    url = (i != -1) ? url.substr(i+5) : 'http://as-is.net/maps/sample.kml'; 
     159    url = 'http://as-is.net/maps/aproxy.cgi?url=' + encodeURIComponent(url); 
     160    request.open("GET", url, true); 
     161    request.onreadystatechange = function() { 
     162      if (request.readyState == 4) { 
     163        var xmlDoc = request.responseXML; 
     164        var markers = xmlDoc.documentElement.getElementsByTagName("Placemark"); 
     165        var len = Math.min(markers.length, 20); 
     166        for (var i = 0; i < len; i++) { 
     167          var lng = parseFloat(markers[i].getElementsByTagName("longitude")[0].childNodes[0].data); 
     168          var lat = parseFloat(markers[i].getElementsByTagName("latitude")[0].childNodes[0].data); 
     169          var point = new GPoint.exjp_create(lng, lat); 
     170          if (!i) map.centerAndZoom(point, 4); 
     171          var names = markers[i].getElementsByTagName("name"); 
     172          var name = names.length ? names[0].childNodes[0].data : ''; 
     173          var descs = markers[i].getElementsByTagName("description"); 
     174          var desc = descs.length ? descs[0].childNodes[0].data : ''; 
     175          var marker = new createMarker(point, i, name, desc); 
     176          map.addOverlay(marker); 
     177        } 
    142178      } 
    143  
    144       var metalink = document.getElementById("meta"); 
    145 //      var markers = new Array(); 
    146 //      function triggerMarker(index) { 
    147 //        GEvent.trigger(markers[index], "click"); 
    148 //      } 
    149  
    150       function createSubMarker(index, name, marker) { 
    151 //      var letter = String.fromCharCode("A".charCodeAt(0) + index); 
    152 //      var image = "http://www.google.com/mapfiles/marker" + letter + ".png"; 
    153         var image = tinyIcon.image; 
    154         metalink.innerHTML += "<li><img src=\"" + image + "\"> " + name + "</li>\n"; 
    155 //      metalink.innerHTML += "<li onclick=\"triggerMarker(" + index + ")\"><img src=\"" + image + "\"> " + name + "</li>\n"; 
    156 //markers[index] = marker; 
    157       } 
    158  
    159       var request = GXmlHttp.create(); 
    160       var f = window.location.search; 
    161       var i = f.indexOf('?url='); 
    162       f = (i != -1) ? decodeURIComponent(f.substr(i+5)) : 'data.xml'; 
    163       request.open("GET", f, true); 
    164       request.onreadystatechange = function() { 
    165         if (request.readyState == 4) { 
    166           var xmlDoc = request.responseXML; 
    167           var markers = xmlDoc.documentElement.getElementsByTagName("Placemark"); 
    168           for (var i = 0; i < markers.length; i++) { 
    169             var lng = parseFloat(markers[i].getElementsByTagName("longitude")[0].childNodes[0].data); 
    170             var lat = parseFloat(markers[i].getElementsByTagName("latitude")[0].childNodes[0].data); 
    171 //            var point = new GPoint(lng, lat); 
    172             var point = new GPoint.exjp_create(lng, lat); 
    173             if (!i) 
    174               map.centerAndZoom(point, 1); 
    175             var name = markers[i].getElementsByTagName("name")[0].childNodes[0].data || ''; 
    176             var desc = markers[i].getElementsByTagName("description")[0].childNodes[0].data || ''; 
    177             var marker = new createMarker(point, i, name, desc); 
    178             map.addOverlay(marker); 
    179 createSubMarker(i, name, marker); 
    180           } 
    181         } 
    182       } 
    183       request.send(null); 
    184179    } 
     180    request.send(null); 
    185181    //]]> 
    186182    </script> 
    187   </head> 
    188   <body onload="onLoad()"> 
    189     <h1>Maps KML file onto Google Maps <small>(SEE ALSO <a href="http://as-is.net/blog/archives/001032.html">http://as-is.net/blog/archives/001032.html</a>)</small></h1> 
    190     <div id="map" style="width:600px;height:400px;float:left;"></div> 
    191     <div style="width:300px;float:left;"> 
    192     <ul id="meta"></ul> 
    193     </div> 
    194183  </body> 
    195184</html>