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
122
123
124
125
126
127
| <html>
<head>
<title>Getting The Direction Between Two Markers In Google Map Using Google MAP API</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
<div id="map-canvas" style="height: 75%;"></div>
<div>
<strong>From Location</strong><br />
<span>Latitude : </span>
<input type="text" id="fromLat" />
<span>Longitude : </span>
<input type="text" id="fromLng" />
<br /><br />
<strong>To Location</strong><br />
<span>Latitude : </span>
<input type="text" id="toLat" />
<span>Longitude : </span>
<input type="text" id="toLng" />
<br /><br />
<div id="direction"></div>
</div>
<script type="text/javascript">
var map;
var fromLat = 6.928940573589038;
var fromLng = 79.87219331750487;
var toLat = 6.929110981212029;
var toLng = 79.87013338098143;
var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
loadMap();
setFromMarker();
setToMarker();
function loadMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(fromLat, fromLng),
zoom: 15
});
}
function setFromMarker() {
var fromMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(fromLat, fromLng),
icon: fromIcon,
animation: google.maps.Animation.DROP,
draggable: true
});
google.maps.event.addListener(fromMarker, 'dragend', function (event) {
fromLat = event.latLng.lat();
fromLng = event.latLng.lng();
setLatLngDetails();
});
}
function setToMarker() {
var toMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(toLat, toLng),
icon: toIcon,
animation: google.maps.Animation.DROP,
draggable: true
});
google.maps.event.addListener(toMarker, 'dragend', function (event) {
toLat = event.latLng.lat();
toLng = event.latLng.lng();
setLatLngDetails();
});
}
function setLatLngDetails() {
$("#fromLat").val(fromLat);
$("#fromLng").val(fromLng);
$("#toLat").val(toLat);
$("#toLng").val(toLng);
getDirection();
}
function getDirection() {
var fromLocation = new google.maps.LatLng(fromLat, fromLng);
var toLocation = new google.maps.LatLng(toLat, toLng);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [fromLocation],
destinations: [toLocation],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback_direction);
}
function callback_direction(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var str = '';
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
if (results[0].status != 'ZERO_RESULTS') {
for (var j = 0; j < results.length; j++) {
str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
}
} else {
str = 'No Direction Found.';
}
}
$("#direction").html(str);
}
}
</script>
</body>
</html>
|
