API tools faq
paste
Advertisement
Bedhoel

Direction Map With Panel

Bedhoel
Sep 21st, 2018
151
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 4.54 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. $origin_lat       = $_REQUEST['origin_lat'];
  3. $origin_long      = $_REQUEST['origin_long'];
  4.  
  5. $destination_lat  = $_REQUEST['destination_lat'];
  6. $destination_long = $_REQUEST['destination_long'];
  7. $zoom = (empty($_REQUEST['zoom']) ? '17' : $_REQUEST['zoom']);  // 1 to 22
  8. $mode = (empty($_REQUEST['mode']) ? 'DRIVING' : $_REQUEST['mode']);  // 1 to 22
  9. ?>
  10.  
  11. <!DOCTYPE html>
  12. <html>
  13.   <head>
  14.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  15.     <meta charset="utf-8">
  16.     <title>Displaying Text Directions With setPanel()</title>
  17.     <style>
  18.       /* Always set the map height explicitly to define the size of the div
  19.        * element that contains the map. */
  20.       #map {
  21.         height: 100%;
  22.       }
  23.       /* Optional: Makes the sample page fill the window. */
  24.       html, body {
  25.         height: 100%;
  26.         margin: 0;
  27.         padding: 0;
  28.       }
  29.       #floating-panel {
  30.         position: absolute;
  31.         top: 10px;
  32.         left: 25%;
  33.         z-index: 5;
  34.         background-color: #fff;
  35.         padding: 5px;
  36.         border: 1px solid #999;
  37.         text-align: center;
  38.         font-family: 'Roboto','sans-serif';
  39.         line-height: 30px;
  40.         padding-left: 10px;
  41.       }
  42.       #right-panel {
  43.         font-family: 'Roboto','sans-serif';
  44.         line-height: 30px;
  45.         padding-left: 10px;
  46.       }
  47.  
  48.       #right-panel select, #right-panel input {
  49.         font-size: 15px;
  50.       }
  51.  
  52.       #right-panel select {
  53.         width: 100%;
  54.       }
  55.  
  56.       #right-panel i {
  57.         font-size: 12px;
  58.       }
  59.       #right-panel {
  60.         height: 100%;
  61.         float: right;
  62.         width: 390px;
  63.         overflow: auto;
  64.       }
  65.       #map {
  66.         margin-right: 400px;
  67.       }
  68.       #floating-panel {
  69.         background: #fff;
  70.         padding: 5px;
  71.         font-size: 14px;
  72.         font-family: Arial;
  73.         border: 1px solid #ccc;
  74.         box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  75.         display: none;
  76.       }
  77.       @media print {
  78.         #map {
  79.           height: 500px;
  80.           margin: 0;
  81.         }
  82.         #right-panel {
  83.           float: none;
  84.           width: auto;
  85.         }
  86.       }
  87.     </style>
  88.   </head>
  89.   <body>
  90.     <div id="floating-panel">
  91.         <b>Mode of Travel: </b>
  92.         <select id="mode">
  93.           <option <?php echo ($mode=="DRIVING" ? 'selected' : '' ) ?>   value="DRIVING">Driving</option>
  94.           <option <?php echo ($mode=="WALKING" ? 'selected' : '' ) ?>   value="WALKING">Walking</option>
  95.           <option <?php echo ($mode=="BICYCLING" ? 'selected' : '' ) ?> value="BICYCLING">Bicycling</option>
  96.           <option <?php echo ($mode=="TRANSIT" ? 'selected' : '' ) ?>   value="TRANSIT">Transit</option>
  97.         </select>
  98.     </div>
  99.     <div id="right-panel"></div>
  100.     <div id="map"></div>
  101.     <script>
  102.       function initMap() {
  103.         var directionsDisplay = new google.maps.DirectionsRenderer;
  104.         var directionsService = new google.maps.DirectionsService;
  105.         var map = new google.maps.Map(document.getElementById('map'), {
  106.           zoom: <?php echo $zoom ?>,
  107.           center: {lat: <?php echo $origin_lat ?>, lng: <?php echo $origin_long ?>}
  108.         });
  109.         directionsDisplay.setMap(map);
  110.         directionsDisplay.setPanel(document.getElementById('right-panel'));
  111.  
  112.         var control = document.getElementById('floating-panel');
  113.         control.style.display = 'block';
  114.         map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
  115.  
  116.         calculateAndDisplayRoute(directionsService, directionsDisplay);
  117.         document.getElementById('mode').addEventListener('change', function() {
  118.           calculateAndDisplayRoute(directionsService, directionsDisplay);
  119.         });
  120.       }
  121.  
  122.       function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  123.         var selectedMode = document.getElementById('mode').value;
  124.         var start = {lat: <?php echo $origin_lat ?>, lng: <?php echo $origin_long ?>};
  125.         var end   = {lat: <?php echo $destination_lat ?>, lng: <?php echo $destination_long ?>};
  126.         directionsService.route({
  127.           origin: start,
  128.           destination: end,
  129.           travelMode: google.maps.TravelMode[selectedMode]
  130.         }, function(response, status) {
  131.           if (status === 'OK') {
  132.             directionsDisplay.setDirections(response);
  133.           } else {
  134.             window.alert('Directions request failed due to ' + status);
  135.           }
  136.         });
  137.       }
  138.     </script>
  139.     <script async defer
  140.     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  141.     </script>
  142.   </body>
  143. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!