Advertisement
Guest User

Untitled

a guest
Jun 26th, 2016
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.17 KB | None | 0 0
  1. var map;
  2. function initMap() {
  3. //var bounds = new google.maps.LatLngBounds();
  4. var origin_place_id = null;
  5. var destination_place_id = null;
  6. var myCenter=new google.maps.LatLngBounds();
  7. var directionsDisplay;
  8. var directionsService = new google.maps.DirectionsService();
  9. var travel_mode = google.maps.TravelMode.WALKING;
  10. map = new google.maps.Map(document.getElementById('map'), {
  11. mapTypeControl: false,
  12. center: myCenter,
  13. zoom: 7,
  14. mapTypeId:google.maps.MapTypeId.ROADMAP
  15. });
  16. var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
  17. this.setZoom(8);
  18. google.maps.event.removeListener(boundsListener);
  19. });
  20.  
  21. google.maps.event.addDomListener(document.getElementById('go'), 'click',route);
  22. var directionsService = new google.maps.DirectionsService;
  23. var directionsDisplay = new google.maps.DirectionsRenderer;
  24.  
  25. directionsDisplay.setMap(map);
  26.  
  27. var origin_input = document.getElementById('origin-input');
  28. var destination_input = document.getElementById('destination-input');
  29. var modes = document.getElementById('mode-selector');
  30.  
  31.  
  32.  
  33. map.controls[google.maps.ControlPosition.TOP_LEFT].push(modes);
  34.  
  35. var origin_autocomplete = new google.maps.places.Autocomplete(origin_input);
  36. origin_autocomplete.bindTo('bounds', map);
  37. var destination_autocomplete = new google.maps.places.Autocomplete(destination_input);
  38. destination_autocomplete.bindTo('bounds', map);
  39.  
  40.  
  41. function setupClickListener(id, mode) {
  42. var radioButton = document.getElementById(id);
  43. radioButton.addEventListener('click', function() {
  44. travel_mode = mode;
  45. });
  46. }
  47. setupClickListener('changemode-walking', google.maps.TravelMode.WALKING);
  48. setupClickListener('changemode-transit', google.maps.TravelMode.TRANSIT);
  49. setupClickListener('changemode-driving', google.maps.TravelMode.DRIVING);
  50.  
  51.  
  52. function expandViewportToFitPlace(map, place) {
  53. if (place.geometry.viewport) {
  54. map.fitBounds(place.geometry.viewport);
  55. } else {
  56. map.setCenter(place.geometry.location);
  57. map.setZoom(17);
  58. }
  59. }
  60.  
  61. origin_autocomplete.addListener('place_changed', function() {
  62. var place = origin_autocomplete.getPlace();
  63. if (!place.geometry) {
  64. window.alert("Autocomplete's returned place contains no geometry");
  65. return;
  66. }
  67. expandViewportToFitPlace(map, place);
  68.  
  69.  
  70. origin_place_id = place.place_id;
  71. route(origin_place_id, destination_place_id, travel_mode,
  72. directionsService, directionsDisplay);
  73.  
  74. });
  75.  
  76. destination_autocomplete.addListener('place_changed', function() {
  77. var place = destination_autocomplete.getPlace();
  78. if (!place.geometry) {
  79. window.alert("Autocomplete's returned place contains no geometry");
  80. return;
  81. }
  82.  
  83. expandViewportToFitPlace(map, place);
  84. $('#go').click(function(){
  85. var origin_input = document.getElementById('origin-input').value;
  86. var res = origin_input.split(",");
  87. var bc = res[0];
  88. var destination_input = document.getElementById('destination-input').value;
  89. var res = destination_input.split(",");
  90. var bd = res[0];
  91.  
  92. destination_place_id = place.place_id;
  93. route(origin_place_id, destination_place_id, travel_mode,
  94. directionsService, directionsDisplay);
  95. });
  96. });
  97. $('#mode-selector').hide();
  98. $('#go').click(function(){
  99. //$('#go').hide(250);
  100. $('#mode-selector').show(250);
  101. });
  102.  
  103.  
  104. function route(origin_place_id, destination_place_id, travel_mode,
  105. directionsService, directionsDisplay) {
  106. if (!origin_place_id || !destination_place_id) {
  107. return;
  108. }
  109. directionsService.route({
  110. origin: {'placeId': origin_place_id},
  111. destination: {'placeId': destination_place_id},
  112. travelMode: travel_mode
  113. },
  114. function(response, status) {
  115. if (status === google.maps.DirectionsStatus.OK) {
  116. directionsDisplay.setDirections(response);
  117. } else {
  118. window.alert('Directions request failed due to ' + status);
  119. }
  120. });
  121. }
  122.  
  123. var markers = [
  124. ['Faisalabad, Pakistan', 31.4187,73.0791],
  125. ['Multan, Pakistan', 30.1984,71.4687],
  126. ['Lahore, Pakistan', 31.5546,74.3572],
  127. ['Sahiwal, Pakistan', 30.6612,73.1086]
  128. ];
  129. directionsDisplay = new google.maps.DirectionsRenderer();
  130. directionsDisplay.setMap(map);
  131. //marker.setMap(map);
  132. var infoWindow = new google.maps.InfoWindow(), marker, i;
  133. // Loop through our array of markers & place each one on the map
  134. for( i = 0; i < markers.length; i++ ) {
  135. var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
  136. myCenter.extend(position);
  137. marker = new google.maps.Marker({
  138. position: position,
  139. map: map,
  140. title: markers[i][0]
  141. });
  142. map.fitBounds(myCenter);
  143. var route = 0;
  144. var pos_source=0;
  145. var pos_destination=0;
  146.  
  147. google.maps.event.addListener(marker, 'click', (function(marker, i) {
  148. return function() {
  149. route++;
  150. if(route==1)
  151. {
  152. pos_source = this.position;
  153. $('mode-selector').hide();
  154. }
  155. if(route==2)
  156. {
  157. pos_destination = this.position;
  158. route = 0;
  159.  
  160. var start = new google.maps.LatLng(pos_source.lat(), pos_source.lng());
  161. var end = new google.maps.LatLng(pos_destination.lat(), pos_destination.lng());
  162.  
  163. var request = {
  164. origin: start,
  165. destination: end,
  166. travelMode: google.maps.TravelMode.DRIVING
  167.  
  168. };
  169. $('mode-selector').show();
  170.  
  171. directionsService.route(request, function (response, status) {
  172. if (status == google.maps.DirectionsStatus.OK) {
  173. directionsDisplay.setDirections(response);
  174. }
  175. });
  176. }
  177.  
  178. }
  179. })(marker, i));
  180. }
  181.  
  182. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement