SHARE
TWEET

JavaScript from 4/17/24 Appery.io Webinar

exadel Apr 17th, 2014 1,561 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. *** MAP
  2. google_map
  3.  
  4.  
  5. *** INIT JS
  6.  
  7. var directionsDisplay;
  8. var map;
  9. var markers = [];
  10. var directionsService = new google.maps.DirectionsService();
  11. var bounds = new google.maps.LatLngBounds();
  12. var trafficLayer = new google.maps.TrafficLayer();
  13.  
  14. function initialize() {
  15.     console.log('Initializing...');
  16.    
  17.     map = Apperyio("google_map").gmap;
  18.     if (!map) {
  19.         setDelay();
  20.     } else {
  21.         directionsDisplay = new google.maps.DirectionsRenderer();
  22.     }
  23. }
  24.  
  25. function displayDirections(sourceAddress, destinationAddress, map) {
  26.     var request = {
  27.         origin: sourceAddress,
  28.         destination: destinationAddress,
  29.         travelMode: google.maps.DirectionsTravelMode.DRIVING
  30.     };
  31.     directionsService.route(request, function(response, status) {
  32.         directionsDisplay.setMap(map);
  33.         if (status == google.maps.DirectionsStatus.OK) {
  34.             directionsDisplay.setDirections(response);
  35.         } else {
  36.             alert("Directions query unsuccessful. Response status: " + status);
  37.         }
  38.     });
  39. }
  40.  
  41. function setDelay() {
  42.     setTimeout(initialize, 50);
  43. }
  44.  
  45. *** PAGE LOAD
  46. initialize();
  47.  
  48. ** ADD MARKER FROM GEOLOCATION
  49.  
  50. var markerLatLng = new google.maps.LatLng(localStorage.getItem('markerLat'), localStorage.getItem('markerLng'));
  51.  
  52. var marker = new google.maps.Marker({
  53.     position: markerLatLng,
  54.     map: map,
  55.     title: 'My position',
  56.     animation: google.maps.Animation.DROP
  57. });
  58.  
  59. markers.push(marker);
  60. bounds.extend(markerLatLng);
  61. map.fitBounds(bounds);
  62. map.setZoom(10);
  63.  
  64.  
  65. *** TRAFFIC ON/OFF
  66.  
  67. trafficLayer.setMap(map);
  68. Apperyio('nav_menu').panel('close');
  69.  
  70. trafficLayer.setMap(null);
  71. Apperyio('nav_menu').panel('close');
  72.  
  73.  
  74. *** CLEAR MAP
  75. for (var i = 0; i < markers.length; i++) {
  76.     markers[i].setMap(null);
  77. }
  78. directionsDisplay.setMap(null);
  79. trafficLayer.setMap(null);
  80. Apperyio('nav_menu').panel('close');
  81.  
  82.  
  83. *** SHOW ROUTE
  84.  
  85. var sourceAddress = Apperyio("from").val();
  86. var destinationAddress = Apperyio("to").val();
  87. displayDirections(sourceAddress, destinationAddress, map);
  88.  
  89. *** ADD MARKER FROM REST SERVICE
  90.  
  91. var markerLatLng = new google.maps.LatLng(localStorage.getItem('markerLat'), localStorage.getItem('markerLng'));
  92.  
  93. var marker = new google.maps.Marker({
  94.     position: markerLatLng,
  95.     map: map,
  96.     title: data.results[0].address_components[0].long_name,
  97.     animation: google.maps.Animation.DROP
  98. });
  99.  
  100. markers.push(marker);
  101. bounds.extend(markerLatLng);
  102. map.fitBounds(bounds);
  103.  
  104.  
  105. *** MAPPING
  106.  
  107. JSON.stringify(value.Place, convertAddress);
  108.  
  109. function convertAddress(key, value)
  110. {
  111.     convert_address.execute({
  112.         'data' : {
  113.             'address' : value,
  114.             'sensor' : false
  115.         }
  116.     });
  117. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top