Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 268 lines (244 sloc) 8.502 kb
00d8692 Initial import
Simon Willison authored
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4 <head>
5 <title>Get Lat Lon - find the latitude and longitude of a point on a map</title>
6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
7 <!--
8 Undocumented feature: www.getlatlon.com/?PLACE zooms straight to that place
9 -->
10 <style type="text/css">
11 body {
12 margin: 0;
13 margin-bottom: 3em;
14 padding: 0;
15 font-family: "Gill sans", sans-serif;
16 background-color: #fff;
17 color: #000;
18 }
19 div#hd {
20 text-align: center;
21 border-bottom: 2px solid black;
22 }
23 div#hd h1 {
24 margin-bottom: 0;
25 font-size: 1.5em;
26 }
27 div#ft {
28 border-top: 2px solid black;
29 }
30 div#ft p {
31 width: 500px;
32 margin: 1em auto;
33 }
34 p#builtby {
35 font-size: 0.8em;
36 text-align: right;
37 color: #666;
38 }
39 div#bd {
40 position: relative;
41 }
42 div#gmap {
43 width: 100%;
44 height: 400px; /* If you change this don't forget to change the crosshair position to match */
45 }
46 div#crosshair {
47 position: absolute;
48 top: 192px;
49 height: 19px;
50 width: 19px;
51 left: 50%;
52 margin-left: -8px;
53 display: block;
54 background: url(crosshair.gif);
55 background-position: center center;
56 background-repeat: no-repeat;
57 }
58 </style>
59 <script src="http://www.google.com/jsapi?key=ABQIAAAAyYu8a7AdbfUctK3zwwu_2hQcSOGmiixENvtTH313vIgQ4X1LYBSDZW5glZCCklLKePmjvJ8YN_LpPA" type="text/javascript">
60 </script>
61 <script type="text/javascript">
62 google.load('maps', '2'); // Load version 2 of the Maps API
63
64 function timezoneLoaded(obj) {
65 var timezone = obj.timezoneId;
66 if (!timezone) {
67 return;
68 }
69 document.getElementById('timezone').innerHTML = timezone;
70 document.getElementById('timezonep').style.display = 'block';
71 // Find out what time it is there
72 var s = document.createElement('script');
73 s.src = "http://json-time.appspot.com/time.json?callback=timeLoaded&tz=" + timezone;
74 s.type = 'text/javascript';
75 document.getElementsByTagName('head')[0].appendChild(s);
76 }
77
78 function timeLoaded(obj) {
79 if (obj.datetime) {
80 document.getElementById('datetime').innerHTML = obj.datetime;
81 document.getElementById('datetimep').style.display = 'block';
82 }
83 }
84
88a7bf4 added longitude, latitude output and WKT
Simon Willison authored
85 function updateLatLonFields(lat, lon) {
86 document.getElementById("latlon").innerHTML = lat + ', ' + lon;
87 document.getElementById("wkt").innerHTML = 'POINT('+lon+' '+lat +')';
88 }
89
dae961a Added OpenStreetMap layer
Simon Willison authored
90 function getOSMMapType() {
91 // Usage: map.addMapType(getOSMMapType());
92 var copyright = new GCopyrightCollection(
93 '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
94 );
95 copyright.addCopyright(
96 new GCopyright(1, new GLatLngBounds(
97 new GLatLng(-90, -180),
98 new GLatLng(90, 180)
99 ), 0, ' ')
100 );
101 var tileLayer = new GTileLayer(copyright, 1, 18, {
102 tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png',
103 isPng: false
104 });
105 var mapType = new GMapType(
106 [tileLayer], G_NORMAL_MAP.getProjection(), 'OSM'
107 );
108 return mapType;
109 }
110
00d8692 Initial import
Simon Willison authored
111 function showMap() {
112 window.gmap = new google.maps.Map2(document.getElementById('gmap'));
113 gmap.addControl(new google.maps.LargeMapControl());
114 gmap.addControl(new google.maps.MapTypeControl());
dae961a Added OpenStreetMap layer
Simon Willison authored
115 gmap.addMapType(getOSMMapType());
00d8692 Initial import
Simon Willison authored
116 gmap.enableContinuousZoom();
117 gmap.enableScrollWheelZoom();
118
119 var timer = null;
120
121 google.maps.Event.addListener(gmap, "move", function() {
122 var center = gmap.getCenter();
88a7bf4 added longitude, latitude output and WKT
Simon Willison authored
123 updateLatLonFields(center.lat(), center.lng());
00d8692 Initial import
Simon Willison authored
124
125 // Wait a second, then figure out the timezone
126 if (timer) {
127 clearTimeout(timer);
128 timer = null;
129 }
130 timer = setTimeout(function() {
131 document.getElementById('timezonep').style.display = 'none';
132 document.getElementById('datetimep').style.display = 'none';
133 // Look up the timezone using geonames
134 var s = document.createElement('script');
135 s.type = 'text/javascript';
136 s.src = "http://ws.geonames.org/timezoneJSON?lat=" + center.lat() +
137 "&lng=" + center.lng() + "&callback=timezoneLoaded";
138 document.getElementsByTagName("head")[0].appendChild(s);
139 }, 1500);
140
141 });
142 google.maps.Event.addListener(gmap, "zoomend", function(oldZoom, newZoom) {
143 document.getElementById("zoom").innerHTML = newZoom;
144 });
145 google.maps.Event.addDomListener(document.getElementById('crosshair'),
146 'dblclick', function() {
147 gmap.zoomIn();
148 }
149 );
150
151 // Default view of the world
152 gmap.setCenter(
153 new google.maps.LatLng(43.834526782236814, -37.265625), 3
154 );
155
156 /* If we have a best-guess for the user's location based on their IP,
157 show a "zoom to my location" link */
158 if (google.loader.ClientLocation) {
159 var link = document.createElement('a');
160 link.onclick = function() {
161 gmap.setCenter(
162 new google.maps.LatLng(
163 google.loader.ClientLocation.latitude,
164 google.loader.ClientLocation.longitude
165 ), 8
166 );
167 return false;
168 }
169 link.href = '#'
170 link.appendChild(
171 document.createTextNode('Zoom to my location (by IP)')
172 );
173 var form = document.getElementById('geocodeForm');
174 var p = form.getElementsByTagName('p')[0];
175 p.appendChild(link);
176 }
177
178 // Set up Geocoder
179 window.geocoder = new google.maps.ClientGeocoder();
180
181 // If query string was provided, geocode it
182 var bits = window.location.href.split('?');
183 if (bits[1]) {
184 var location = decodeURI(bits[1]);
185 document.getElementById('geocodeInput').value = location;
186 geocode(location);
187 }
188
189 // Set up the form
190 var geocodeForm = document.getElementById('geocodeForm');
191 geocodeForm.onsubmit = function() {
192 geocode(document.getElementById('geocodeInput').value);
193 return false;
194 }
195 }
196
197 var accuracyToZoomLevel = [
198 1, // 0 - Unknown location
199 5, // 1 - Country
200 6, // 2 - Region (state, province, prefecture, etc.)
201 8, // 3 - Sub-region (county, municipality, etc.)
202 11, // 4 - Town (city, village)
203 13, // 5 - Post code (zip code)
204 15, // 6 - Street
205 16, // 7 - Intersection
b034052 Added "Premise" accuracy level.
Simon Willison authored
206 17, // 8 - Address
207 17 // 9 - Premise
00d8692 Initial import
Simon Willison authored
208 ];
209
210 function geocodeComplete(result) {
211 if (result.Status.code != 200) {
212 alert('Could not geocode "' + result.name + '"');
213 return;
214 }
215 var placemark = result.Placemark[0]; // Only use first result
216 var accuracy = placemark.AddressDetails.Accuracy;
217 var zoomLevel = accuracyToZoomLevel[accuracy] || 1;
218 var lon = placemark.Point.coordinates[0];
219 var lat = placemark.Point.coordinates[1];
220 gmap.setCenter(new google.maps.LatLng(lat, lon), zoomLevel);
221 }
222
223 function geocode(location) {
224 geocoder.getLocations(location, geocodeComplete);
225 }
226
227 google.setOnLoadCallback(showMap);
228 </script>
229 </head>
230 <body>
231 <div id="hd">
232
233 <h1>Get Lat Lon</h1>
234 <p>Find the latitude and longitude of a point on a map.</p>
235 <form action="http://maps.google.com/maps" id="geocodeForm">
236 <p>
237 <label for="geocodeInput">Place name: </label>
238 <input type="text" name="q" id="geocodeInput">
239 <!-- "Accessible" version of Google Maps: -->
240
241 <input type="hidden" name="output" value="html">
242 <input type="submit" value="Zoom to place">
243 </p>
244 </form>
245 </div>
246 <div id="bd">
247 <div id="gmap"></div>
248 <div id="crosshair"></div>
249 </div>
250
251 <div id="ft">
252 <p><strong>Latitude, Longitude:</strong> <span id="latlon"></span></p>
88a7bf4 added longitude, latitude output and WKT
Simon Willison authored
253 <p><strong>WKT:</strong> <span id="wkt"></span></p>
00d8692 Initial import
Simon Willison authored
254 <p><strong>Google Maps zoom level:</strong> <span id="zoom"></span></p>
255 <p id="timezonep" style="display: none"><strong>Timezone:</strong> <span id="timezone"></span></p>
256 <p id="datetimep" style="display: none"><strong>Local time:</strong> <span id="datetime"></span></p>
257 <p id="builtby">Built by <a href="http://simonwillison.net/2007/Oct/12/latlon/">Simon Willison</a></p>
258 </div>
259
260 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
261 </script>
262
263 <script type="text/javascript">
264 var _uacct = "UA-1090368-4"; urchinTracker();
265 </script>
266 </body>
267 </html>
Something went wrong with that request. Please try again.