Source Code for JavaScript Mapping Tools: index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml"  xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Mapping and Distance Tools</title>
<meta NAME="Description" CONTENT=
"This application is a set of map drawing tools.  One tool shows the shortest distance between two points,
and the other tool shows the area within a given distance of a point.">
<meta NAME="keywords" CONTENT=
"map tools, mileage calculator, great circle, radius, airline distance, rhumb line, air distance,
 geographic distance, azimuth, nautical miles, geodesy, air travel">

<!--

Copyright 2006-2008 (c) Paul Demers  <paul@acscdg.com>

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA., or visit one 
of the links here:
http://www.gnu.org/licenses/old-licenses/gpl-2.0.txt
http://www.acscdg.com/LICENSE.txt

Map drawing and distance tools.
Web site with this code running: http://www.acscdg.com/

-->


<link rel="stylesheet" href="main.css" type="text/css">

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=insert_your_google_maps_key_here"
type="text/javascript"></script>

<script src="mapControls.js" type="text/javascript"></script>
<script src="geo.js" type="text/javascript"></script>
<script src="formatters.js" type="text/javascript"></script>
<script src="wayPoint.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script src="geoCode.js" type="text/javascript"></script>
<script src="wayPointsManager.js" type="text/javascript"></script>
<script src="geoCircle.js" type="text/javascript"></script>
<script src="tableManager.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>

</head>

<body onresize="resizeBody()" onload="load()" onunload="GUnload()">

<div id="main">

  <div id="titleText">Mapping and Distance Tools</div>
  <hr></hr>
  <div id="quickReference">
A tool for computing distances on Google maps.
Quick start: A course is the shortest line between two points. Move the map cursor to the desired start point
 and click there; or use the find box.  Then, move to the next point and click again; or use the find box
 again.  Continue choosing points until done.  Pan and zoom the map if necessary to find each point.
A circle is a line around a point.  Choose the circle's center by clicking on the map; or use the find box. 
 Move the cursor away from the center the desired distance, and click again; or, use the find box.  
<a href="help.htm" target="new">More help...</a> 
<a href="source_html/src_index_html.html">The source code</a>
  </div>
  <hr></hr>

  <div id="tools">

    <div id="units">
      Select a unit of measure for distance: 
        <select onChange="changeUnits()" id="changeUnitsBox"> <!-- TODO: don't hardcode values. -->
          <option selected value="0">Nautical Miles</option>
          <option value="2">Kilometers</option>
          <option value="1">Miles</option> 
        </select>
    </div>
    <div id="geoCoder">
      <form action="#" onsubmit="findLocation(); return false;">
        Find a location by name or address:
        <input type="text" name="q" value="" class="address_input" size="40" />
        <input type="submit" name="find" value="Find" />
      </form>
    </div>

  </div> <!-- tools. -->

  <div id="inner">
    <div id="pointsTableDiv">
      <table id="pointsTable">
      </table>
    </div>

    <div id="map"></div>

  </div> <!-- inner -->
</div> <!-- main -->

<!-- Google Adsense: -->
<div id="adsDiv">
  <script type="text/javascript"><!--
    google_ad_client = "insert_your_google_publisher_id_here";
    google_ad_slot = "insert_google_ad_slot_number_here";
    google_ad_width = 120;
    google_ad_height = 600;
  //--></script>
  <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  </script>
</div>

<!-- Google Analytics: -->
<script
  src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
  _uacct = "insert_your_google_analytics_id_here";
  urchinTracker();
</script>

</body>
</html>