-
Notifications
You must be signed in to change notification settings - Fork 0
/
maps.html
75 lines (64 loc) · 2.18 KB
/
maps.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Aeropuertos</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
loadCountries();
})
function loadCountries() {
var countrySelect = $("#ae_country");
$.post("gmaps.php", {action: "listCountries"}, function(response){
var res = "<option>Select a country</option>";
for(i=0; i < response.length; i++ ){
res += "<option value='" + response[i] + "'>" + response[i] + "</option>";
}
countrySelect.html(res);
}, "json");
countrySelect.change(loadStates);
}
function loadStates() {
var stateSelect = $("#ae_state");
var countryVal = $("#ae_country").val();
$.post("gmaps.php", {action: "listStates", ae_country: countryVal}, function(response){
var res = "<option>Select a state</option>";
for( i=0; i < response.length; i++){
res += "<option value='" + response[i] + "'>" + response[i] + "</option>";
}
stateSelect.html(res);
}, "json");
stateSelect.change(loadAirports);
}
function loadAirports() {
var airportSelect = $("#ae_name");
var countryVal = $("#ae_country").val();
var stateVal = $("#ae_state").val();
// alert(countryVal + " " + stateVal);
$.post("gmaps.php", {action: "listAirports", ae_country: countryVal, ae_state: stateVal}, function(response) {
var res = "<option>Select an airport</option>";
for( i=0; i < response.length; i++) {
res += "<option value='" + response[i].code + "'>" + response[i].name + "</option>";
}
airportSelect.html(res);
}, "json")
airportSelect.change(loadMap);
}
function loadMap() {
var mapContainer = $("#mapContainer");
var keyValue = $("#ae_name").val();
$.post("gmaps.php", {action: "generateMap", ae_key: keyValue}, function(image){
mapContainer.html(image);
})
}
</script>
</head>
<body>
<select name="ae_country" id="ae_country"></select>
<select name="ae_state" id="ae_state"></select>
<select name="ae_name" id="ae_name"></select>
<div id="mapContainer" style="margin: 0 auto">
</div>
</body>
</html>