5b16e28efc3d31b84c0707398e101682428da5a9
[maps-routes-comparison] / index.html
1 <html>
2 <head>
3     <title>Routes Compare</title>
4     <link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
5     <script type="text/javascript" src="prototype.js"></script>
6     <script type="text/javascript" src="effects.js"></script>
7     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
8     <script type="text/javascript" src="googlemaps.js"></script>
9     <script type="text/javascript" src="countries.js"></script>
10     <script type="text/javascript">
11
12       // Copyright (c) Guillaume Cottenceau and licensed under the Apache 2.0 License
13
14       var mylat, mylng;
15       var map;
16       var places = new Array();
17       var geocoder = new google.maps.Geocoder();
18       var directions_service = new google.maps.DirectionsService();
19       var info_window = null;
20       var bounds;
21       var travelmode = google.maps.DirectionsTravelMode.DRIVING;
22
23       function reload(new_places) {
24           for (var i = 0; i < places.length; i++) {
25               places[i].marker.setMap(null);
26               places[i].directions_display.setMap(null);
27           }
28           places = new Array();
29           document.getElementById("resultslist").innerHTML = '';
30           for (var i = 0; i < new_places.length; i++) {
31               createPlace(new_places[i].latlng, new_places[i].name);
32           }
33       }
34
35       function travelmodeChanged() {
36           travelmode = eval(document.getElementById("travelmode").value);
37           reload(places);
38       }
39
40       function showDirectionCapture(i) {
41           var request = { origin: new google.maps.LatLng(mylat, mylng),
42                           destination: places[i].latlng,
43                           travelMode: travelmode };
44           directions_service.route(request, function(result, status) {
45               if (status == google.maps.DirectionsStatus.OK) {
46                   places[i].directions_display.setMap(map);
47                   places[i].directions_display.setDirections(result);
48                   displayDirectionsMoreinfo(result.routes[0], document.getElementById("directions" + ( 1 + i )));
49               }
50           });
51       }
52       
53       function fitmap() {
54           if (document.getElementById("fitmap").checked) {
55               map.fitBounds(bounds);
56           }
57       }
58
59       function showDirections() {
60           if (places.length > 0) {
61               bounds = new google.maps.LatLngBounds();
62               bounds.extend(new google.maps.LatLng(mylat, mylng));
63           }
64           for (var i = 0; i < places.length; i++) {
65               if (!places[i].directions_display.getMap()) {
66                   showDirectionCapture(i);
67               }
68               bounds.extend(places[i].latlng);
69           }
70           fitmap();
71       }
72
73       function showDel(number) {
74           document.getElementById("delete" + number).style.visibility = 'visible';
75       }
76
77       function hideDel(number) {
78           document.getElementById("delete" + number).style.visibility = 'hidden';
79       }
80
81       function del(number) {
82           var new_places = new Array();
83           for (var i = 0; i < places.length; i++) {
84               if (i == number - 1) {
85                   places[i].marker.setMap(null);
86                   places[i].directions_display.setMap(null);
87               } else {
88                   new_places.push(places[i]);
89               }
90           }
91           reload(new_places);
92       }
93
94       function createPlace(latlng, name) {
95           var number = places.length + 1;
96           var iconname = 'icon' + ( 7 + number );
97           var marker = new google.maps.Marker({ position: latlng,
98                                                 title:name,
99                                                 icon:getIcon(iconname),
100                                                 shadow:getShadow(iconname) });
101           marker.setMap(map);
102           document.getElementById("resultslist").innerHTML += "<li onmouseover='showDel(" + number + ")' onmouseout='hideDel(" + number + ")'><img class='iconwithtext' src='icons/" + iconname + ".png'/> " + name
103                                                               + "<div style='float:right; padding:3; visibility:hidden' id='delete" + number
104                                                               + "'><a href='#' onclick='del(" + number + ")'><img src='icons/bin.png'/></a></div>"
105                                                               + "<br/><span id='directions" + number + "'></span></li>";
106           var directions_display = new google.maps.DirectionsRenderer({ preserveViewport: true, suppressMarkers: true, draggable: true });
107           google.maps.event.addListener(directions_display, "directions_changed", function() {
108               displayDirectionsMoreinfo(directions_display.getDirections().routes[0], document.getElementById("directions" + number ));
109           });
110           places.push({marker:marker, latlng:latlng, name:name, directions_display:directions_display});
111           showDirections();
112       }
113
114       function submit() {
115           if (info_window) {
116               info_window.close();
117           }
118           var address = document.getElementById('address').value;
119           geocoder.geocode({ 'address': address },
120                            function(results, status) {
121                                if (status == google.maps.GeocoderStatus.OK) {
122                                    createPlace(results[0].geometry.location, address);
123                                    document.getElementById('address').value = '';
124                                    document.getElementById('address').focus();
125                                } else {
126                                    document.getElementById('submitshortresult').innerHTML = "Address not found...";
127                                    document.getElementById('submitshortresult').style.display = '';
128                                    setTimeout('new Effect.Fade(document.getElementById("submitshortresult"), {duration: 0.4})', 1000);
129                                }
130                            });
131       }
132
133       function save() {
134           var link = "#me=" + mylat + ";" + mylng;
135           for (var i = 0; i < places.length; i++) {
136               link += "&p=" + places[i].latlng.lat() + ";" + places[i].latlng.lng() + ";" + encodeURI(places[i].name);
137           }
138           document.getElementById('savediv').style.display = '';
139           var save = document.getElementById('save');
140           save.value = 'http://zarb.org/~gc/maps-routes-comparison/' + link;
141           save.focus();
142           save.select();
143       }
144
145       function startUp() {
146           var me = new google.maps.Marker({position: new google.maps.LatLng(mylat, mylng),
147                                            title: 'Me',
148                                            draggable: true,
149                                            icon: getIcon('icon31'),
150                                            shadow: getShadow('icon31')});
151           me.setMap(map);
152           google.maps.event.addListener(me, "dragend", function(mouseEvent) {
153                   mylat = mouseEvent.latLng.lat();
154                   mylng = mouseEvent.latLng.lng();
155                   reload(places);
156               });
157           map.setCenter(new google.maps.LatLng(mylat, mylng));
158           return me;
159       }
160                          
161       function initialize() {
162           map = new google.maps.Map(document.getElementById("mapbox"),
163                                     { mapTypeId: google.maps.MapTypeId.ROADMAP,
164                                       zoom: 8 });
165
166           mylat = 0;
167           mylng = 0;
168           var all_params = location.href.split("#")
169           if (all_params.length > 1 && all_params[1].length > 0) {
170               var params = all_params[1].split("&");
171               for (i = 0; i < params.length; i++) {
172                   var keyvalue = params[i].split("=");
173                   var values = keyvalue[1].split(";");
174                   if (keyvalue[0] == 'me') {
175                       mylat = values[0];
176                       mylng = values[1];
177                   } else if (keyvalue[0] == 'p') {
178                       createPlace(new google.maps.LatLng(values[0], values[1]), decodeURI(values[2]));
179                   }
180               }
181               startUp();
182           } else {
183               document.getElementById('submitshortresult').innerHTML = '<em>Please wait, geolocating you...</em>';
184               downloadUrl("http://api.hostip.info/get_html.php?position=true",
185                           function(data) {
186                               var baseinfomessage = 'This is where I located you,<br/>based on your IP address.<br/>';
187                               if (data.match(/Latitude: (\S+)/)) {
188                                   mylat = RegExp.$1;
189                                   if (data.match(/Longitude: (\S+)/)) {
190                                       mylng = RegExp.$1;
191                                   }
192                               } else if (data.match(/Country: .*?\((\S{2})\)/)) {
193                                   var country = RegExp.$1;
194                                   if (country == 'XX') {
195                                       map.setZoom(2);
196                                       baseinfomessage = 'It was not possible to locate<br/>you, based on your IP address<br/>'
197                                                         + '<a href="http://www.hostip.info/">(submit your location!)</a>.<br/>';
198                                   } else {
199                                       map.setZoom(5);
200                                       mylat = eval("lats." + country);
201                                       mylng = eval("lngs." + country);
202                                   }
203                               }
204                               me = startUp();
205                               document.getElementById('submitshortresult').innerHTML = '';
206                               document.getElementById('submitshortresult').style.color = 'red';
207                               info_window = new google.maps.InfoWindow({ content: baseinfomessage
208                                                                                   + 'You can drag this icon<br/>to move your position.<br/>'
209                                                                                   + '<div class="fakelink" style="float: right" onclick="javascript:info_window.close()">Okay</div>' });
210                               info_window.open(map, me);
211                           });
212               if (!document.cookie || document.cookie.indexOf("not-a-newbie") == -1) {
213                   document.getElementById("newbie").style.display = '';
214               }
215               var expires = new Date(new Date().getTime() + (10 * 86400000));  // 10 days
216               document.cookie = "not-a-newbie=true"
217                                 + "; expires=" + expires.toGMTString()
218                                 + "; path=/";
219           }
220       }
221
222     </script>
223 </head>
224
225 <body onload="initialize()">
226
227   <div id="mainbox" style="height: 100%">
228
229     <div id="debugbox"></div>
230
231     <div style="height: 2em">
232       <div style="float: right">
233         travel mode:
234         <select id="travelmode" onchange="travelmodeChanged()">
235           <option value="google.maps.DirectionsTravelMode.DRIVING">driving</option>
236           <option value="google.maps.DirectionsTravelMode.WALKING">walking</option>
237 <!-- doesn't work  <option value="google.maps.DirectionsTravelMode.BICYCLING">Bicycling</option> -->
238         </select>
239         - 
240         <input type="checkbox" id="fitmap" checked="true" onchange="fitmap()">fit to elements
241         - 
242         <a href="#" onclick="save()">
243           save this page
244           <img src="icons/save.png" class="iconwithtext"/>
245         </a>
246         <div id="savediv" style="display: none; position:absolute; right:1em; top:3em; background:#E0E0FF; border:solid 1px black; padding:0.5em; z-index:1">
247           The following link will directly present the current data:
248           <br/>
249           <input type="text" id="save" size="40"/>
250           <br/>
251           <div style="float:right"><a href="#" onclick="javascript:new Effect.Fade(document.getElementById('savediv'), {duration: 0.4})">Okay</a></div>
252         </div>
253       </div>
254
255       <form action="javascript:submit()">
256       Type in an address:
257       
258       <input type="text" size="32" id="address"/>
259       <script type="text/javascript">
260         document.getElementById('address').focus();
261       </script>
262       <input type="submit" value="Show route!"/>
263       <span id="submitshortresult">
264       </span>
265       </form>
266
267     </div>
268
269
270     <div class="containermainbox">
271       <div style="float: right; width: 75%; height: 100%">
272          <div id="mapbox" style="width: 100%; height: 95%">
273          </div>
274          <div style="float:right; font-size:70%; margin-top:3px">
275            <em>
276              uses goodies from Google Maps and Scriptaculous, and is glued together by
277              <a href="http://zarb.org/~gc/">Guillaume Cottenceau</a>
278            </em>
279          </div>
280       </div>
281       <div id="newbie" style="display: none; background-color: lightpink; border: solid 1px blue; position:absolute; width:20%; margin:1.5em">
282         <p align="right">
283           <img src="icons/top.png"/>
284         </p>
285         <p align="right" style="margin-right:1em; margin-top:-1em">
286           1. add an address in the top area
287         </p>
288         <br/>
289         <p align="right">
290           <img src="icons/right.png"/>
291         </p>
292         <p align="right" style="margin-right:1em; margin-top:-1em">
293           2. the routes from all added addresses to the "home"
294           icon will be shown on the map
295         </p>
296         <br/>
297         <br/>
298         <p align="right" style="margin-right:1em; margin-top:-1em">
299           <a href="#" onclick="javascript:new Effect.Fade(document.getElementById('newbie'), {duration: 0.4})">Okay</a>
300         </p>
301       </div>
302       <ul id="resultslist">
303       </ul>
304     </div>
305
306   </div>
307
308 </body>
309 </html>