-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_2.html
121 lines (102 loc) · 3.73 KB
/
index_2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
//https://sites.google.com/site/gmapstips/export-my-map-as-kml
//has a neat trick for extracting raw kml from a my map
//idea is that we use polylines to, in steps draw a series of lat-lngs together, as described here: http://code.google.com/apis/maps/documentation/javascript/overlays.html#PolylineOptions
//if we define a function that times this process, it could appear like an animation
$(document).ready (function(){
var maps = [];
var mapPanels = [];
var mapLayers = [];
var mapFiles = ["http://dl.dropbox.com/u/5403549/museum.kml",
"http://dl.dropbox.com/u/5403549/gritty.kml",
"http://dl.dropbox.com/u/5403549/explorer.kml",
"http://dl.dropbox.com/u/5403549/scenic.kml"];
var showFirstLayer = function (){
console.log("init complete")
showLayer(0);
$('#tab_0').click();
}
var showLayer = function (index){
for(var i = 0; i < mapPanels.length; i++) {
if (i == index) {
mapPanels[i].show();
}
else {
mapPanels[i].hide();
}
}
}
var initialize = function (aFunctionToCallOnCompletion) {
var mapsLoaded = 0;
var handleMapLayerLoaded = function () {
console.log("loaded a map, total is now " + (mapsLoaded + 1));
if (++mapsLoaded == mapFiles.length) {
aFunctionToCallOnCompletion();
}
}
//for each kml file
//create a map object in the appropriate panel
//and create a new layer into which we will load the kml
//for (var i = 0; i < 1; i++) {
for (var i = 0; i < mapFiles.length; i++) {
var panel = $('#map_' + i);
console.log("panel at position " + i);
//this is the line that seems to fix the problem of using 'panel' instead of refetching the DOM element as we are here
var map = new google.maps.Map(document.getElementById("map_" + i), myOptions);
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var layer = new google.maps.KmlLayer(mapFiles[i]);
layer.setMap(map);
google.maps.event.addListener(layer, "metadata_changed", handleMapLayerLoaded);
maps.push(map);
mapLayers.push(layer);
mapPanels.push(panel);
}
console.log(mapsLoaded);
}
initialize(function(){ showFirstLayer() });
//manage clicks
$('.tab').click(function () {
var number = $(this).attr("id").replace('tab_', '')
$('.tab').removeClass('tab_selected');
$('#tab_' + number).addClass('tab_selected');
showLayer(number);
//show_route_details(number);
});
});
// var show_route_details = function(number) {
// route_name = "route_" + number
// details = routes_data[route_name]
// $("#route_details").html(
// "<span>" + "Name: " + details["name"] + "</span></br>" +
// "<span>" + "Length: " + details["length"] + "</span></br>" +
// "<span>" + "Time: " + details["time"] + "</span></br>" +
// "<span>" + "Level: " + details["level"] + "</span></br>"
// )
// }
</script>
</head>
<body>
<div id="map_0" class="map"></div>
<div id="map_1" class="map"></div>
<div id="map_2" class="map"></div>
<div id="map_3" class="map"></div>
<div id="navigation">
<div id="tab_0" class="tab"></div>
<div id="tab_1" class="tab"></div>
<div id="tab_2" class="tab"></div>
<div id="tab_3" class="tab"></div>
</div>
<div id="route_details">
</body>
</html>