topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

mashup-gmaps-ch10-01.htm / htm


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  
  <title>MCslp Maps Chapter 10, Ex 1</title>
  <script src="http://maps.google.com/maps?file=api&v=1&key=YOURKEY" type="text/javascript"></script>
  
  <script type="text/javascript">
  
  var map;
  var points = [];
  var index = 0;
  var infopanel;
  
  function onLoad() {
      if (GBrowserIsCompatible()) {
          infopanel = document.getElementById("infopanel");
          map = new GMap(document.getElementById("map"));
          map.centerAndZoom(new GPoint(0,0), 16);
          
          var request = GXmlHttp.create();
          request.open('GET','ch10-01.xml', true);
          request.onreadystatechange = function() {
              if (request.readyState == 4) {
                  var xmlsource = request.responseXML;
                  var markerlist = xmlsource.documentElement.getElementsByTagName("city");
                  for (var i=0;i < markerlist.length;i++) {
                      addmarker(parseFloat(markerlist[i].getAttribute("lng")),
                                parseFloat(markerlist[i].getAttribute("lat")),
                                markerlist[i].getAttribute("title"));
                  }
              }
              recenterandzoom(points);
          }
          request.send(null);
      }
  }
  
  function addmarker(x,y,title) {
      var point = new GPoint(parseFloat(x),parseFloat(y));
      points.push(point);
      var marker = new GMarker(point);
      map.addOverlay(marker);
      infopanel.innerHTML = infopanel.innerHTML + 
          '<a href="#" onClick="movemap(' + index + ');">' + 
          title + 
          '</a><br/>';
      index++;
  }    
  
  function recenterandzoom(points) {
      var latpoints = [];
      var lngpoints = [];
  
      var idealzoom = 1;
  
      if (points.length == 0) {
          return;
      }
  
      if (points.length == 1) {
          map.centerAndZoom(points[0],idealzoom);
          return;
      }
  
      for(var i=0;i<points.length;i++) {
              latpoints.push(points[i].y);
          lngpoints.push(points[i].x);
      }
  
      latpoints.sort(function(x,y) { return x-y });
      lngpoints.sort(function(x,y) { return x-y });
  
      var newlat = latpoints[0] + ((latpoints[latpoints.length-1] - latpoints[0])/2);
      var newlng = lngpoints[0] + ((lngpoints[lngpoints.length-1] - lngpoints[0])/2);
  
      var newpoint = new GPoint(parseFloat(newlng),parseFloat(newlat));
  
      var idealspan = new GSize(parseFloat((Math.abs(lngpoints[lngpoints.length-1]-lngpoints[0]))*1.25),
                                parseFloat((Math.abs(latpoints[latpoints.length-1]-latpoints[0]))*1.25));
  
      map.zoomTo(idealzoom);
  
      for(var i=1;i<16;i++) {
          var currentsize = map.getSpanLatLng();
                  if ((currentsize.width < idealspan.width) ||
              (currentsize.height < idealspan.height)) {
              map.zoomTo(i);
              idealzoom = i;
          }                
          else {
              break;
          }
      }
  
      map.centerAndZoom(newpoint,idealzoom);
  }
  
    function movemap(index) {
        map.recenterOrPanToLatLng(points[index]);
    }
  
    </script>
    </head>
    <body onload="onLoad()">
    <table cellspacing="15" cellpadding="0" border="0">
    <tr valign="top">
    <td><div id="map" style="width: 800px; height: 600px"></div></td>
    <td><h1>US City Population</h1><div id="infopanel"></div></td>
    </tr>
    </table>
    </body>
  </html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.