Membuat direction map API GIS di php pemula berdasarkan rute.

Membuat direction map API GIS di php pemula berdasarkan rute.

Membuat direction map API GIS di php pemula berdasarkan rute.

Membuat direction map gis di php pemula berdasarkan rute. pada kesempatan kali ini freak programmer akan membagikan cara membuat rute direction dimana direction ini akan membuat pada peta satu arah. langsung saja.

Langkah-langkah
2. masuk ke projek anda seperti gambar di bawah.
Membuat direction map gis di php pemula berdasarkan rute.
3.Ketik pada kolom pencarian “Direction” dan pilih direction API
Membuat direction map gis di php pemula berdasarkan rute.
4.Aktifkan API dengan memilih aktifkan
Membuat direction map API GIS di php pemula berdasarkan rute.
5.Setelah selesai proses aktivasi, akan muncul tampilan seperti dibawah ini
Membuat direction map API GIS di php pemula berdasarkan rute.


Membuat direction map API GIS di php pemula berdasarkan rute.
Coding
1.       Buatlah sebuah file dengan nama “direction.php”
Membuat direction map API GIS di php pemula berdasarkan rute.
2.       Isi file dengan sebagai berikut
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Nama Anda</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
    <b>Start: </b>
    <select id="start">
      <option value="banjarbaru">Banjarbaru</option>
      <option value="matah">Matah</option>
      <option value="angsau">Angsau</option>
      <option value="banjarmasin">Banjarmasin</option>
      <option value="martapura">Martapura</option>
      <option value="pelaihari">Pelaihari</option>
      <option value="-3.753921, 114.767339">Politeknik Tanah Laut</option>
      <option value="-3.799797, 114.782563">Kantor Bupati Tanah Laut</option>
      <option value="-3.799557, 114.777925">Rumah Sakit Boedjasin</option>
    </select>
    <b>End: </b>
    <select id="end">
      <option value="banjarbaru">Banjarbaru</option>
      <option value="matah">Matah</option>
      <option value="angsau">Angsau</option>
      <option value="banjarmasin">Banjarmasin</option>
      <option value="martapura">Martapura</option>
      <option value="pelaihari">Pelaihari</option>
      <option value="-3.753921, 114.767339">Politeknik Tanah Laut</option>
      <option value="-3.799797, 114.782563">Kantor Bupati Tanah Laut</option>
      <option value="-3.799557, 114.777925">Rumah Sakit Boedjasin</option>
    </select>
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: -3.799557,lng: 114.777925}
        });
        directionsDisplay.setMap(map);
        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('end').addEventListener('change', onChangeHandler);
      }
      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7B9RynI4hQM_Y4BG9GYxsTLWwYkGASRo&callback=initMap">
</script>
</body>
</html>
Output
Membuat direction map API GIS di php pemula berdasarkan rute.
Membuat direction map API GIS di php pemula berdasarkan rute.
KELEBIHAN
Kelebihan dari direction adalah memberitahu arah pada peta dimana peta tersebut mempunyai jalan alur menuju ke tempat tujuan. Hal ini akan memudahkan pemakai peta dalam mecari tempat tujuan, direction memberikan informasi dari satu titik ke titk lain yang memungkinkan memberitahu jalan yang tepan dan cepat kepada pemakai peta direction.

Buka Komentar