Cara Membuat Aplikasi GIS Sederhana dengan PHP

Sebelum kita mulai membuat aplikasinya, ada baiknya kita mengetahui terlebih dahulu sistem yang akan kita pakai pada aplikasi GIS yang akan kita buat dan kita menggunakan Google map API untuk menampilkan georafis petanya.

GIS (Geographic Information System) 

GIS adalah singkatan dari Geographic Information System atau system informasi geografis. GIS merupakan suatu alat yang dpat digunakan untuk mengelola (input, manajemen, dan output) data spasial atau data yang bereferensi geografis. Setiap data yang merujuk lokasi di permukaan bumi dapat disebut sebagai data spasial bereferensi geografis. Misalnya data kepadatan penduduk suatu daerah, data jaringan atau saluran dan sebagainya.

Apa sih Google maps API?

Sebelum membahas Google Maps API, kita harus paham dulu dengan API. API adalah kependekan dari Application programming interface. Dengan bahasa yang lebih sederhana, API adalah fungsi fungsi  pemrograman yang disediakan oleh aplikasi atau layanan agar layananan tersebut bisa di integrasikan dengan aplikasi yang kita buat.

Jadi Google maps API adalah fungsi fungsi pemrograman yang disediakan oleh Google maps agar Google maps bisa di integrasikan kedalam Web atau aplikasi yang sedang buat. Contoh sederhanya misalkan anda ingin membuat Sistem informasi Geografis kampus di jogja, dengan memanfaatkan Google Maps API anda bisa membuat GIS tanpa perlu memikirkan Peta Jogja, anda tinggal pake Google maps dan memanggil fungsi fungsi yang dibutuhkan seperti menampilkan peta, menempatkan marker dan sabagainya.

Langkah - langkah :

Pertama kita include script google apinya : load library place untuk geocoder autocomplete dan kita set bahasanya ke bahasa indonesia.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&language=id"></script>

Download jquery library : sebelum memulai, silahkan download jquery library dan Jquery UI library-nya.

<script src="jquery.js"></script>

Membuat script untuk menentukan posisi awal

    var dest;
    var directionsDisplay;

    // memanggil service Google Maps Direction
 var directionsService = new google.maps.DirectionsService();
 directionsDisplay = new google.maps.DirectionsRenderer();

    $(document).ready(function() {
        var myOptions = {
            zoom: 4,
            center: new google.maps.LatLng(-2.548926,118.0148634),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // posisi awal ketika halaman pertama kali dimuat
        var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        // memanggil fungsi geocoder autocomplete
        var autocomplete = new google.maps.places.Autocomplete((document.getElementById('dest')),{ types: ['geocode'] });
     
     /* 
      fungsi geolocation pada geocoder ini sangat penting
      agar pencarian daerah tujuan pada textbox ga ngaco 
     */
     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function(position) {
             var geolocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
             autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,geolocation));
         });
     }

 });

Membuat script trigger untuk menentukan posisi akhir atau tujuan dan jalur rutenya
 

$(document).ready(function() {
  // ketika tombol cari di klik, maka proses pencarian rute dimulai
  $("#cari").click(function(){

   dest = $("#dest").val();

   var defaultLatLng = new google.maps.LatLng(-2.548926,118.0148634);

   /* 
    nah, pada fungsi geolocation disini adalah
    ketika koordinat user berhasil didapat maka peta koordinat yang digunakan
    adalah koordinat user, namun jika tidak berhasil maka koordinat yang digunakan
    adalah koordinat default (pada variable defaultLatLng)
   */
      if (navigator.geolocation) {
          function success(pos) {
              drawMap(pos.coords.latitude,pos.coords.longitude);
          }

          function fail(error) {
              drawMap(defaultLatLng);
          }
          
          navigator.geolocation.getCurrentPosition(success, fail, { maximumAge: 500000, enableHighAccuracy:true, timeout: 6000 });

      } else {
          drawMap(defaultLatLng);  
      }

      function drawMap(lat,lng) {

          var myOptions = {
              zoom: 15,
              center: new google.maps.LatLng(lat,lng),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

          // kita bikin marker untuk asal dengan koordinat user hasil dari geolocation
          var markerorigin = new google.maps.Marker({
                 position: new google.maps.LatLng(parseFloat(lat),parseFloat(lng)),
                 map: map,
                 title: "Origin",
                 visible:false // kita ga perlu menampilkan markernya, jadi visibilitasnya kita set false
    });

          // membuat request ke Direction Service
          var request = {
     origin: markerorigin.getPosition(), // untuk daerah asal, kita ambil posisi user
        destination: dest, // untuk daerah tujuan, kita ambil value dari textbox tujuan
        provideRouteAlternatives:true, // set true, karena kita ingin menampilkan rute alternatif

        /**
         * kamu bisa tambahkan opsi yang lain seperti
         * avoidHighways:true (set true untuk menghindari jalan raya, set false untuk menonantifkan opsi ini)
         * atau kamu bisa juga menambahkan opsi seperti
         * avoidTolls:true (set true untuk menghindari jalan tol, set false untuk menonantifkan opsi ini)
         */
        travelMode: google.maps.TravelMode.DRIVING // set mode DRIVING (mode berkendara / kendaraan pribadi)
        /**
         * kamu bisa ganti dengan 
         * google.maps.TravelMode.BICYCLING (mode bersepeda)
         * google.maps.TravelMode.WALKING (mode berjalan)
         * google.maps.TravelMode.TRANSIT (mode kendaraan / transportasi umum)
         */
    };


    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response); 
        }
      });
    // menampiklkan rute pada peta dan juga direction panel sebagai petunjuk text
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById('directions-panel'));
      
      // menampilkan layer traffic atau lalu-lintas pada peta
      var trafficLayer = new google.maps.TrafficLayer();
      trafficLayer.setMap(map);

      }
  });
 });

Membuat tampilan pada HTML, sehingga dapat tampil pada browser

<input type="text" id="dest" style="width:500px;">
<button type="button" id="cari">Cari Rute</button>
<br><br>
<div id="directions-panel" style="float:right; width:48%; height:600px; overflow:auto;"></div>
<div id="map-canvas" style="width:50%; height:600px;"></div>

Hasil akhir programnya akan seperti dibawah ini :