[cig-commits] r16074 - in cs: . geocoord

Fri Dec 4 15:42:22 PST 2009

Author: leif
Date: 2009-12-04 15:42:21 -0800 (Fri, 04 Dec 2009)
New Revision: 16074

Added:
   cs/geocoord/
   cs/geocoord/geocoord.js
   cs/geocoord/index.html
Log:
This page uses Google Maps to allow users to easily find their
latitude and longitude.  It is available here:

    http://crust.geodynamics.org/~leif/geocoord/

It uses code stolen from here:

    http://pagesperso-orange.fr/universimmedia/geo/loc.htm

Note that this page includes a Google Maps API key which I generated
for the "geodynamics.org" domain.


Added: cs/geocoord/geocoord.js
===================================================================

--- cs/geocoord/geocoord.js	                        (rev 0)
+++ cs/geocoord/geocoord.js	2009-12-04 23:42:21 UTC (rev 16074)
@@ -0,0 +1,46 @@
+
+function load() {
+    if (GBrowserIsCompatible()) {
+        var map = new GMap2(document.getElementById("map"));
+        map.addControl(new GSmallMapControl());
+        map.addControl(new GMapTypeControl());
+        var center = new GLatLng(0.0, 0.0);
+        map.setCenter(center, 1);
+        geocoder = new GClientGeocoder();
+        document.getElementById("lat").innerHTML = center.lat().toFixed(5);
+        document.getElementById("lng").innerHTML = center.lng().toFixed(5);
+    }
+}
+
+function showAddress(address) {
+    var map = new GMap2(document.getElementById("map"));
+    map.addControl(new GSmallMapControl());
+    map.addControl(new GMapTypeControl());
+    if (geocoder) {
+        geocoder.getLatLng(
+            address,
+            function(point) {
+		if (!point) {
+		    document.getElementById("error").innerHTML = "Couldn't find \"" + address + "\".  Try being more specific.";
+		    document.getElementById("result").style.display = "none";
+		} else {
+		    document.getElementById("error").innerHTML = "";
+		    document.getElementById("result").style.display = "";
+
+		    document.getElementById("lat").innerHTML = point.lat().toFixed(5);
+		    document.getElementById("lng").innerHTML = point.lng().toFixed(5);
+		    map.clearOverlays()
+		    map.setCenter(point, 14);
+		    var marker = new GMarker(point, {draggable: true});  
+		    map.addOverlay(marker);
+
+		    GEvent.addListener(marker, "dragend", function() {
+			var pt = marker.getPoint();
+			document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
+			document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
+		    });
+		}
+            }
+        );
+    }
+}

Added: cs/geocoord/index.html
===================================================================
--- cs/geocoord/index.html	                        (rev 0)
+++ cs/geocoord/index.html	2009-12-04 23:42:21 UTC (rev 16074)
@@ -0,0 +1,39 @@
+<!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>Find My Latitude and Longitude</title>
+    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAnlc7zq6qybw16PSYxce8ERTfaBwM4PVqxZ21cYTB45x0KSyuQhSg5BPSRbB_fXl7SOxDgLjxaEdYYA" type="text/javascript"></script>
+    <script src="geocoord.js" type="text/javascript"></script>
+  </head>
+  
+  <body onload="load()" onunload="GUnload()" >
+
+    <h1>Find My Latitude and Longitude</h1>
+
+    <form action="#" onsubmit="showAddress(this.address.value); return false">
+      <p>        
+	<input type="text" size="60" name="address" value="" />
+	<input type="submit" value="Search" />
+      </p>
+    </form>
+
+    <div align="center" id="map" style="width: 600px; height: 400px"></div>
+
+    <p id="error" style="color: red;"></p>
+
+    <div id="result" style="margin: 1em; border: thick double green; padding: 1em; display: none;">
+
+      <table>
+	<tr><td><b>Latitude:</b></td><td id="lat"></td></tr>
+	<tr><td><b>Longitude:</b></td><td id="lng"></td></tr>
+      </table>
+
+      <p><b>Tip:</b> Drag the marker <img src="http://maps.gstatic.com/intl/en_us/mapfiles/marker.png" align="bottom">
+	  to fine-tune your latitude and longitude.</p>
+
+    </div>
+
+  </body>
+
+</html>

