Cara Membuat Aplikasi Google Maps Dengan PHP dan MySQL

Google Maps Dengan PHP dan MySQL

Data lokasi yang statis atau yang di tuliskan secara langsung pada baris kode java script tentu sangat tidak efisien bagi developer google maps, terutama dalam pembuatan titik lokasi yang cukup banyak. Titik-titik ini jika di ketikan dalam baris kode java script akan dibentuk sebagai array, dan kemudian dipanggil menggunakan perulangan. Dari sinilah titik atau marker ditampilkan berdasarkan latitude dan longitude nya. Lalu bagaimana jika titik-titik ini selalu bertambah dengan lokasi yang berbeda-beda? Tentu developer harus membongkar dan menambah lagi di baris java script nya. 

Dengan adanya bahasa pemrograman PHP dan database MySQL (atau database lain), pembuatan maps akan lebih mudah terutama dalam menampilkan titik-titik yang bersifat dinamis. PHP dapat kita guanakan sebagai proses dalam pengambilan data pada database, sedangkan MySQL dapat digunakan dalam penyimpanan lokasi.

Membuat Database

Database yang kita gunakan saat ini sangat sederhana, kita akan membuat sebuah program yang menampilkan marker/titik layanan publik seperti atm, bank, dan spbu. Silahkan insert query dibawah ini pada MySQL anda (phpmyadmin).

CREATE TABLE `tabel_data` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `latitude` decimal(10,7) NOT NULL,
  `longitude` decimal(10,7) NOT NULL,
  `keterangan` varchar(255) NOT NULL,
  `kategori` enum('SPBU','ATM','BANK') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Membuat Koneksi Database dan Fungsi CRUD

Buat file koneksi dengan nama file conf.php, file ini berisi koneksi ke database dan fungsi untuk CRUD pada aplikasi. Silahkan ketik kode program dibawah ini.

<?php
/**
* Dibuat Oleh Hady Eka Saputra || www.java-sc.com
*/
class konfigurasi {
   public function __construct() {
    try {
     $host = "localhost";
     $db = "tutor_gmaps";
     $user = "root";
     $pass = "";
     $this->db = new PDO('mysql:host='.$host.';dbname='.$db.'',''.$user.'',''.$pass.'');
     $this->db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
     // echo "Berhasil terkoneksi !";
    }
    catch (PDOException $e) {
     echo $e->getMessage();
    }
   }
public function getXMLData($tabel){
   $getXMLData = $this->db->prepare("SELECT * FROM $tabel");
   $getXMLData->execute();
   return $getXMLData;
}
public function tampil($tabel , $id){
   $tampil = $this->db->prepare("SELECT * FROM $tabel ORDER BY $id DESC");
   $tampil->execute();
   return $tampil;
}
public function tampilBerdasarkanData($tabel , $kondisi ,$id){
   $tampil = $this->db->prepare("SELECT * FROM $tabel WHERE $kondisi='$id'");
   $tampil->execute();
   return $tampil;
}
public function tambah($tabel , $latitude,$longitude,$keterangan,$kategori){
   $tambah = $this->db->prepare("INSERT INTO $tabel (id, latitude, longitude, keterangan, kategori) VALUES (NULL,'$latitude','$longitude','$keterangan','$kategori') ");
   $tambah->execute();
   return $tambah;
}
public function ubah($tabel , $latitude,$longitude,$keterangan,$kategori,$kondisi,$nilai){
   $ubah = $this->db->prepare("UPDATE $tabel SET latitude='$latitude', longitude='$longitude', keterangan='$keterangan', kategori='$kategori' WHERE $kondisi='$nilai'");
   $ubah->execute();
   return $ubah;
}
public function hapus($tabel , $kondisi,$nilai){
   $hapus = $this->db->prepare("DELETE FROM $tabel WHERE $kondisi='$nilai'");
   $hapus->execute();
   return $hapus;
}
}


?>

Membuat File Data XML

File ini nantinya akan menjadikan data pada database berupa data XML, buatlah file bernama koordinat.php dan isikan dengan kode berikut ini.

<?php
include 'conf.php';
$konfigurasi = new konfigurasi();
$getData = $konfigurasi->getXMLData('tabel_data');
header("Content-type: text/xml");
try {
  echo "<markers>";
    while ($result = $getData->fetch(PDO::FETCH_OBJ)) {
    if ($getData->rowCount() < 1) {
     echo "<marker Data Kosong />";
    }
    else {
     echo "<marker ";
     echo "a='" . $result->id. "' ";
     echo "b='" . $result->latitude. "' ";
     echo "c='" . $result->longitude. "' ";
     echo "d='" . $result->keterangan. "' ";
     echo "e='" . $result->kategori. "' ";
     echo "/>";
    }
   }
  echo "</markers>";
}
catch (PDOException $e) {
   echo $e->getMessage();
}


?>

Design dan Komponen

Pada pembuatan design CRUD yang digunakan dalam pembuatan aplikasi maps, anda dapat menggunakan file komponen berikut

Download Komponen

File Header

File header berisi link css dan beberapa javascript, buatlah file header.php dan ketikan kode program di bawah ini.

><head>
   <title>Java Sc Developer</title>
   <link rel="stylesheet" type="text/css" href="assets/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="assets/dataTables.bootstrap.css">
   <script type="text/javascript" src="assets/jquery-1.11.1.js"></script>
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=ISI DENGAN API KEY ANDA&callback=initMap">
    </script>
</head>

File Footer

File footer ini berisi semua script yang akan digunakan pada aplikasi. buatlah sebuah file footer.php dan ketikan kode program dibawah ini.

<script src="https://use.fontawesome.com/2642b88c56.js"></script>
<script type="text/javascript" src="assets/bootstrap.js"></script>
<script type="text/javascript" src="assets/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/dataTables.bootstrap.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
        $('#table').DataTable({
                responsive: true,
                paging: true,
        });
   });
 </script>

Membuat Halaman Utama

Halaman utama di dalam nya berisi file include dari beberapa file yang memiliki fungsi sebagai header, footer, input,  configurasi, dan home. Buatlah file index.php dan ketikan kode program dibawah.

<!DOCTYPE html>
<?php
if (isset($_GET['page']) == null) {
 header("location:index.php?page=home");
}
include 'conf.php';
$konfigurasi = new konfigurasi();
?>
<html>
<?php include 'header.php'; ?>
<body style="margin-top:10px">
 <div class="container">
 <?php
 switch ($_GET['page']) {
   case 'kelola':
    include 'input.php';
   break;
   default:
    include 'home.php';
   break;
   }
 ?>
 </div>
</body>
<?php include 'footer.php'; ?>
</html>

Membuat Page Home

Buatlah sebuah file bernama home.php dalam folder dan kemudian masukan source code berikut ini.

<style type="text/css">
  .gm-style-iw {color: #000000;margin: 0 0 0 0}
  .gmnoprint div {color: #000000;}
</style>
<script type="text/javascript">
    function initMap() {
      var map;
      var styleGMaps = [
  {
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "gamma": 1.96 },
      { "lightness": -65 },
      { "saturation": 53 },
      { "hue": "#00e5ff" },
      { "weight": 0.2 },
      { "color": "#dd6630" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      { "invert_lightness": true },
      { "lightness": 33 },
      { "gamma": 0.84 },
      { "hue": "#0008ff" },
      { "visibility": "on" },
      { "saturation": 38 },
      { "weight": 2.2 },
      { "color": "#4f90f4" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "color": "#ffb147" },
      { "saturation": 23 },
      { "hue": "#ff9100" },
      { "lightness": -30 },
      { "gamma": 4.09 },
      { "weight": 2.1 }
    ]
  },{
    "featureType": "landscape.natural",
    "elementType": "geometry.fill",
    "stylers": [
      { "visibility": "on" },
      { "lightness": -14 },
      { "color": "#5cae8e" },
      { "weight": 0.4 },
      { "saturation": 34 },
      { "gamma": 1.42 }
    ]
  }
];

      var styled = new google.maps.StyledMapType(styleGMaps,
        {name: "Styled Map"});


      var mapOptions = {
          center: {lat: 0.5163256, lng: 101.4437629},
          zoom:12,
          mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
          },
          mapTypeControl: false,
          zoomControl: false,
          scaleControl: false,
          streetViewControl: false,
          rotateControl: false,
          fullscreenControl: false
        };


      var mapAwal = {
          center: {lat: 0.5163256, lng: 101.4437629},
          zoom: 12 ,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map'),mapOptions);
      map.mapTypes.set('map_style', styled);
      map.setMapTypeId('map_style');
      var infoWindow = new google.maps.InfoWindow;
      downloadUrl("koordinat.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var latitude = parseFloat(markers[i].getAttribute("b"));
          var longitude = parseFloat(markers[i].getAttribute("c"));
          var keterangan = markers[i].getAttribute("d");
          var kategori = markers[i].getAttribute("e");
          var icon = 'assets/'+kategori+'.png' || {};
          var marker = new google.maps.Marker({
            map: map,
            position: {lat:latitude,lng:longitude},
            icon: icon,
          });
          bindInfoWindow(marker, map, infoWindow, keterangan);
        }
      });
    }


    function bindInfoWindow(marker, map, infoWindow, keterangan) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(keterangan);
        infoWindow.open(map, marker);
      });
    }


    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;


      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };


      request.open('GET', url, true);
      request.send(null);
    }


    function doNothing() {}
</script>
<div class="row">
  <div class="col-md-12">
    <div class="panel panel-success">
        <div class="panel-heading">
            <center><h4>LOKASI PELAYANAN UMUM DI KOTA PEKANBARU</h4></center>
        </div>
        <div class="panel-body">
        <a href="index.php?page=kelola" class="btn btn-warning">Halaman Kelola</a>&nbsp<button class="btn btn-danger" onclick="location.reload()">Refresh Maps</button></br>
        </br>
          <div id="map" style="width:100%;height:450px" ></div>
        </div>
    </div>
  </div>
</div>

Membuat Page CRUD

Terakhir adalah kode program untuk crud-nya, buatlah file dengan nama input.php dan isikan dengan kode program dibawah ini.

<div class="col-md-12">
  <div class="row">
  <center><h3>Tutorials By Java Source Code</h3></center>
    <p class="alert alert-info"><strong>Kelola Data Lokasi</strong>&nbsp<a href="index.php?page=kelola&aksi=tambah" class="btn btn-primary"><i class="fa fa-plus"></i> Tambah</a>&nbsp<a href="index.php?page=home" class="btn btn-success"><i class="fa fa-arrow-left"></i> Kembali</a></p>
  </div>
  <div class="row">
   <?php 
    if ($_GET['page'] == 'kelola' && isset($_GET['hapus']) == 'true' && !empty($_GET['data']) ) {
     try {
      $delete = $konfigurasi->hapus('tabel_data','id',$_GET['data']);
      if ($delete) {
       echo "<script>alert('Data Lokasi Berhasil Dihapus');window.location.href = 'index.php?page=kelola'</script>";
      }
     }
     catch (PDOException $e) {
      echo $e->getMessage();
     }
    }
    else if ($_GET['page'] == 'kelola' && isset($_GET['aksi']) == 'tambah' && empty($_GET['data'])) {
     if (isset($_POST['simpan'])) {
      try {
       $insert = $konfigurasi->tambah('tabel_data',$_POST['latitude'],$_POST['longitude'],$_POST['keterangan'],$_POST['kategori']);
       if ($insert) {
        echo "<script>alert('Data Lokasi Berhasil Disimpan');window.location.href = 'index.php?page=kelola'</script>";
       }
      }
      catch (PDOException $e) {
       echo $e->getMessage();
      }
     }
     ?>
    <script type="text/javascript">
       function updateMarkerPosition(latLng) {
            document.getElementById('latitude').value = [latLng.lat()]
            document.getElementById('longitude').value = [latLng.lng()]
        }
        function initMap(){
       var map = new google.maps.Map(document.getElementById('maps'), {
           zoom: 14,
           center: new google.maps.LatLng(0.5163256, 101.4437629),
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           mapTypeControl: false,         zoomControl: true,
         scaleControl: false,
         streetViewControl: false,
         rotateControl: false,
         fullscreenControl: false
       });
       var latLng = new google.maps.LatLng(0.5163256, 101.4437629);
       var marker = new google.maps.Marker({
           position : latLng,
           title : 'lokasi',
           map : map,
           streetViewControl: false,
           draggable : true,
       });
       updateMarkerPosition(latLng);
       google.maps.event.addListener(marker, 'drag', function() {
           updateMarkerPosition(marker.getPosition());
       });
        }
        </script>
   <div class="col-md-12">
    <div class="panel panel-default">
    <div class="panel-body">
    <div class="col-md-6">
     <form class="form-horizontal" method="POST" action="">
      <div class="form-group">
       <div class="col-md-12">
        <input type="text" placeholder="Latitude" name="latitude" id="latitude" class="form-control">
       </div>
      </div>
      <div class="form-group">
       <div class="col-md-12">
        <input type="text" placeholder="Longitude" name="longitude" id="longitude" class="form-control">
       </div>
      </div>
      <div class="form-group">
       <div class="col-md-12">
       <textarea class="form-control" name="keterangan" rows="3"></textarea>
       </div>
     </div>
      <div class="form-group">
       <div class="col-md-12">
        <select class="form-control" name="kategori">
         <option>ATM</option>
         <option>BANK</option>
         <option>SPBU</option>
        </select>
       </div>
      </div>
      <input type="submit" class="btn btn-success" name="simpan" value="SIMPAN">
      <a href="index.php?page=kelola" class="btn btn-warning">BATAL</a>
     </form>
     </div>
     <div class="col-md-6">
      <div id="maps" style="width:100%;height:300px"></div>
     </div>
    </div>
    </div>
   </div>
    <?php
   }
   else if ($_GET['page'] == 'kelola' && isset($_GET['aksi']) == 'edit' && !empty($_GET['data'])) {
   $read = $konfigurasi->tampilBerdasarkanData('tabel_data','id',$_GET['data']);
   $result = $read->fetch();
   if (isset($_POST['ubah'])) {
    try {
     $update = $konfigurasi->ubah('tabel_data' , $_POST['latitude'],$_POST['longitude'],$_POST['keterangan'],$_POST['kategori'],'id',$_GET['data']);
     if ($update) {
      echo "<script>alert('Data Lokasi Berhasil Diubah');window.location.href = 'index.php?page=kelola'</script>";
     }
    }
    catch (PDOException $e) {
     echo $e->getMessage();
    }
   }
    ?>
<script type="text/javascript">
       function updateMarkerPosition(latLng) {
            document.getElementById('latitude').value = [latLng.lat()]
            document.getElementById('longitude').value = [latLng.lng()]
        }
        function initMap(){
       var map = new google.maps.Map(document.getElementById('maps'), {
           zoom: 14,
           center: new google.maps.LatLng(<?php echo $result['latitude'];?>, <?php echo $result['longitude']; ?>),
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           mapTypeControl: false,
          zoomControl: true,
         scaleControl: false,
         streetViewControl: false,
         rotateControl: false,
         fullscreenControl: false
       });
       var latLng = new google.maps.LatLng(<?php echo $result['latitude'];?>, <?php echo $result['longitude']; ?>);
       var marker = new google.maps.Marker({
           position : latLng,
           title : 'lokasi',
           map : map,
           streetViewControl: false,
           draggable : true,
       });
       updateMarkerPosition(latLng);
       google.maps.event.addListener(marker, 'drag', function() {
           updateMarkerPosition(marker.getPosition());
       });
        }
        </script>
     <div class="col-md-12">
      <div class="panel panel-default">
      <div class="panel-body">
      <div class="col-md-6">
       <form class="form-horizontal" method="POST" action="">
        <div class="form-group">
         <div class="col-md-12">
          <input type="text" placeholder="Latitude" name="latitude" id="latitude" class="form-control" value="<?php echo $result['latitude']; ?>">
         </div>
        </div>
        <div class="form-group">
         <div class="col-md-12">
          <input type="text" placeholder="Longitude" name="longitude" id="longitude" class="form-control" value="<?php echo $result['longitude']; ?>">
         </div>
        </div>
        <div class="form-group">
         <div class="col-md-12">
          <textarea class="form-control" name="keterangan" rows="3"><?php echo $result['keterangan']; ?></textarea>
         </div>
        </div>
        <div class="form-group">
         <div class="col-md-12">
          <select class="form-control" name="kategori">
          <?php
          if ($result['kategori'] == "ATM") {
           echo "
           <option selected>ATM</option>
           <option>BANK</option>
           <option>SPBU</option>
           ";
          }
          else if ($result['kategori'] == "BANK") {
           echo "
            <option>ATM</option>
            <option selected>BANK</option>
            <option>SPBU</option>
          ";
          }
          else {
           echo "
            <option>ATM</option>
            <option>BANK</option>
            <option selected>SPBU</option>";
         }
          ?>
          </select>
         </div>
        </div>
        <input type="submit" class="btn btn-success" name="ubah" value="UBAH">
        <a href="index.php?page=kelola" class="btn btn-warning">BATAL</a>
       </form>
       </div>
       <div class="col-md-6">
        <div id="maps" style="width:100%;height:300px"></div>
       </div>
       </div>
     </div>
    </div>
      <?php
     }
    ?>
     <table id="table" class="table table-responsive table-bordered table-striped">
      <thead>
       <th width="5%">No</th>
       <th width="15%">Latitude</th>
       <th width="15%">Longitude</th>
       <th width="10%">Kategori</th>
       <th>Keterangan</th>
       <th width="5%">Ubah</th>
       <th width="5%">Hapus</th>
      </thead>
          <tbody>
          <?php
          $read = $konfigurasi->tampil('tabel_data','id');
          $no = 1;
          while ($result = $read->fetch()) {
            ?>
            &;nbsp <tr>
                <td><?php echo $no++; ?></td>
                <td><?php  echo $result['latitude'];?></td>
                <td><?php  echo $result['longitude'];?></td>
                <td><?php  echo $result['kategori'];?></td>
                <td><?php  echo $result['keterangan'];?></td>
                <td><a href="index.php?page=kelola&aksi=edit&data=<?php echo $result['id']; ?>" class="btn btn-info"><i class='fa fa-edit'></i></a></td>
            &nbsp        <td><a href="index.php?page=kelola&hapus=true&data=<?php echo $result['id']; ?>" class="btn btn-danger"><i class='fa fa-remove'></i></a></td>
              </tr>
                <?php
              }
            ?>
          </tbody>
        </table>
      </div>
</div>

Hasil

Adapun hasil dari aplikasi ini seperti dibawah ini atau anda dapat akses pada laman berikut >> Demo <<