Source Code for JavaScript Mapping Tools: index.html

Source code of a graphical tool for drawing and computing distances over Google maps.

Run Tool | index.html | main.css | formatters.js | geoCircle.js | geoCode.js | geo.js | index.js | mapControls.js | tableManager.js | util.js | wayPoint.js | wayPointsManager.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns:v="urn:schemas-microsoft-com:vml"  xmlns="">


<!-- Temporary fix for Google bug href= -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

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

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
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:

Map drawing and distance tools.
Web site with this code running:


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

<script src=";v=2&amp;key=insert_your_google_maps_key_here"

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


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

<div id="main">

  <div id="titleText">Mapping and Distance Tools</div>
  <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 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> 
    <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" />

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

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

    <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 type="text/javascript"

<!-- Google Analytics: -->
  src="" type="text/javascript">
<script type="text/javascript">
  _uacct = "insert_your_google_analytics_id_here";