July 1, 2016

Membuat Website Menyimpan dan Menampilkan Maps Sederhana

Pada artikel ini kita akan membuat sebuah website yang dapat menyimpan dan menampilkan Maps sebuah lokasi dengan memanfaatkan koordinat lokasi tersebut. Website didesain sangat sederhana menggunakan bahasa pemograman PHP, HTML, dan JavaScript. Walau sederhana, website dalam tutorial ini dapat dikembangkan menjadi seperti yang terlihat pada AddressLoc.com. Ada pula MySQL sebagai database untuk menyimpan data koordinat lokasi-lokasi yang ada dan ditampilkan dalam bentuk Map dengan memanfaatkan Application Programming Interface (API) dari Google Maps. 

Sebelum kita memulai, saya mengasumsikan bahwa Anda telah memiliki lingkungan pengembangan aplikasi/website meliputi web server, database mysql dan code editor. Jika Anda belum memiliki lingkungan pengembangan ini silahkan untuk disiapkan terlebih dahulu.

1. Membuat Google Maps API Key
Telah disebutkan sebelumnya bahwa dalam menampilkan map di website yang akan dibuat ini akan menggunakan API dari Google Maps, oleh sebab itu kita perlu memiliki kunci akses dalam menggunakan source dari Google Maps. Cara membuat API Key sangat mudah dan gratis:

  1. Masuk pada Google API Console.
  2. Pilih Create atau Select a Project.
  3. Klik Continue untuk mengaktifkan API dan fitur terkait.
  4. Pada halaman Credentials, pilih Browser Key (lalu set API Credentials). (Langkah ini bsa di skip jika Anda sudah punya kunci Browser Key, gunakan saja yang sudah ada)
  5. Simpan kode API Key Anda.



Lebih lengkap tentang pembuatan API Key untuk Google Maps bisa dilihat disini.

2. Menyiapkan Database
Membuat Database
Nama database yang digunakan adalah "gmaps", Anda bisa mengubah atau memiliki nama database sendiri, sesuai dengan kesenangan masing-masing. Pada MySQL masukkan perintah sql:
CREATE DATABASE gmaps;
Membuat Table
Selanjutnya pada database gmaps, buat table dengan nama "lokasi". Pada table ini kita memerlukan beberapa column yaitu idlokasi int(11), nama varchar(100), lat varchar(50), lng varchar (50) dengan idlokasi sebagai primary key. Masukkan perintah SQL berikut:
CREATE TABLE `lokasi` (
  `idlokasi` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) DEFAULT NULL,
  `lat` varchar(50) DEFAULT NULL,
  `lng` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`idlokasi`)
)

3. Coding Website
Menyiapkan Direktori Website
Direktori yang digunakan diberi nama gmaps, untuk pengguna windows bisa dibuat di C:\xampp\htdocs\gmaps, untuk linux pada /var/www/gmaps. Sebagai gambaran awal struktur website yang akan kita buat akan seperti berikut ini:


Config.php
File pertama yang dibuat adalah file koneksi database dengan website kita. Buat file config.php dalam direktori gmaps/inc/ dengan isi file:
<?php
/*
Author : Muhammad Nur Yasir Utomo
Email : yasirutomo@gmail.com
Web : http://www.yasirblog.com
*/

 define('db_host','localhost');
 define('db_user','root');
 define('db_pass','');
 define('db_name','gmaps');
 
 mysql_connect(db_host,db_user,db_pass);
 mysql_select_db(db_name);
 
?>

Index.php
Buat sebuah file didalam direktori gmaps bernama index.php dan isi dengan script berikut ini:
<?php
/*
Author : Muhammad Nur Yasir Utomo
Email : yasirutomo@gmail.com
Web : http://www.yasirblog.com
*/
include ('inc/config.php');
?>
<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Input Maps - www.yasirblog.com</title>
  <!-- <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> -->
  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false" type="text/javascript"></script>
 </head>
 
 <body>
  <a href="index.php">Input Lokasi</a> | 
  <a href="tampil.php">Lihat Daftar Lokasi </a><br/><br/>
  <div id="map" style="width:600px;height: 300px;"></div>
   <form   method="POST" id="form1" action="input_lokasi.php" class='form-horizontal'>
    <br/>
    <div class="control-group">
       <label class="control-label" for="nama">Nama Lokasi</label>
       <div class="controls">
         <input type="text" name='nama' class='input-xlarge'>
       </div>
     </div> 
     <div class="control-group">
       <label class="control-label" for="lat">latitude</label>
       <div class="controls">
         <input type="text" name='lat' id='lat'  >
       </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="lng">Longitude</label>
       <div class="controls">
         <input type="text" name='lng' id='lng' >
       </div>
     </div>
     <div class="control-group">
       <div class="controls">
         <button type="submit" class="btn btn-success" name='aksi'>Submit</button>
       </div>
     </div>
    </form>

<script type="text/javascript">
    document.getElementById('reset').onclick= function() {
        var field1= document.getElementById('lng');
 var field2= document.getElementById('lat');
        field1.value= field1.defaultValue;
 field2.value= field2.defaultValue;
    };
</script>    
<script type="text/javascript">
     function updateMarkerPosition(latLng) {
  document.getElementById('lat').value = [latLng.lat()];
  document.getElementById('lng').value = [latLng.lng()];
  }

    var myOptions = {
      zoom: 7,
        scaleControl: true,
      center:  new google.maps.LatLng(-6.2103572705384975,106.85128400000008),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

 var marker1 = new google.maps.Marker({
 position : new google.maps.LatLng(-6.2103572705384975,106.85128400000008),
 title : 'lokasi',
 map : map,
 draggable : true
 });
 
 //updateMarkerPosition(latLng);

 google.maps.event.addListener(marker1, 'drag', function() {
  updateMarkerPosition(marker1.getPosition());
 });
</script>

 </body>
</html>
Note: Ganti API_KEY dengan kode dari Google API Console
Kode yang terdapat dalam index.php jika di perhatikan mengandung beberapa elemen, yang perlu diperhatikan adalah adanya pemanggilan config.php, API Google Map dalam header, body map dan function updateMarkerPosition JavaScript untuk mendefenesikan posisi awal marker dari Google Map.

Input_lokasi.php
Buat file input_lokasi.php yang akan bertugas untuk meng-insert data nama lokasi dan koordinat ke dalam database mysql. Isi file input_lokasi.php dengan kode berikut:
<?php
/*
Author : Muhammad Nur Yasir Utomo
Email : yasirutomo@gmail.com
Web : http://www.yasirblog.com 
*/
include ('inc/config.php');
//data dari lokasi

$nama = $_POST['nama'];
$lat = $_POST['lat'];
$lng = $_POST['lng'];

echo "$nama | $lat | $lng";

$aksi = $_POST['aksi'];
$id = $_POST['id'];

 $sql = "INSERT INTO lokasi(nama,lat,lng)
  VALUES('$nama','$lat','$lng')";

$result = mysql_query($sql) or die(mysql_error());
echo '<br/><br/><a href="index.php"><< Tambah Lokasi Lagi</a> | <a href="tampil.php">Lihat Semua Lokasi >></a>';
?>

Tampil.php
Untuk halaman yang menampilkan lokasi-lokasi yang sudah ada dalam database di tangani oleh file tampil.php, tempatkan file ini langsung di dalam direktori utama dari gmaps dengan isi file:
<?php
/*
Author : Muhammad Nur Yasir Utomo
Email : yasirutomo@gmail.com
Web : http://www.yasirblog.com 
*/
include ('inc/config.php');
?>
<!DOCTYPE html>
<html>
  <head>
    <title>List Maps - www.yasirblog.com</title>
  </head>
  <body>
    <a href="index.php">Input Lokasi</a> | 
    <a href="tampil.php">Lihat Daftar Lokasi </a><br/><br/>
      <table border="1" >
        <tr>
          <td>No</td>
          <td>Nama</td>
          <td>Peta</td>
        </tr>
        
          <?php
          $cari = mysql_query("select * from lokasi");
          
          while($dapat = mysql_fetch_array($cari)){
            echo "
              <tr>
               <td>$dapat[idlokasi]</td>
               <td>$dapat[nama]</td>
               <td>
                 <a href='tampil_map.php?idlokasi=$dapat[idlokasi]'>Lihat Map</a>
               </td>
              </tr>
            ";
          }
      ?>
      
      </table>
  </body>
</html>

Tampil_map.php
Masih berkaitan dengan menampilkan data, buat sebuah file dengan nama tampil_map.php didalam direktor gmaps. Fungsi dari file ini seperti halaman detail, ketika sebuah lokasi dipilih maka tampil_map.php bekerja menampilkan lokasi tersebut dalam sebuah map. Isi file ini dengan:
<?php
/*
Author : Muhammad Nur Yasir Utomo
Email : yasirutomo@gmail.com
Web : http://www.yasirblog.com 
*/
include ('inc/config.php');
//echo "$_GET[idlokasi]";
  $carimap = mysql_query("select * from lokasi where idlokasi='$_GET[idlokasi]'");
  $dcari = mysql_fetch_array($carimap);
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Maps <?php echo $dcari['nama']; ?> - www.yasirblog.com</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; }
      #map-canvas { height: 100% }
    </style>
    <!-- <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> -->
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false" type="text/javascript"></script>
  </head>

  <body>
    <a href="index.php">Input Lokasi</a> | 
    <a href="tampil.php">Lihat Daftar Lokasi </a><br/>
    <h3>Lokasi : <?php echo $dcari['nama']; ?></h3>
    <div id="map-canvas" style="max-width:500px;max-height: 300px;"/>
  </body>
</html>

<script type="text/javascript">
        function initialize() {
    var mapOptions = {
      zoom: 15,
      center: new google.maps.LatLng(<?php echo "$dcari[lat], $dcari[lng]"; ?>)
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
    
    setMarkers(map, beaches);
  }

  var beaches = [
    ['<?php echo "$dcari[nama]"; ?>', <?php echo "$dcari[lat], $dcari[lng]"; ?>],
  ];

  function setMarkers(map, locations) {
    var shape = {
      coords: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
    };
    var infoWindow = new google.maps.InfoWindow;
    for (var i = 0; i < locations.length; i++) {
      var beach = locations[i];
      var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: beach[4],
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
      });
      var html = 'Lokasi : '+beach[0]+'<br/>Latitude : '+beach[1]+'<br/>Longitude : '+beach[2]+'';
      bindInfoWindow(marker, map, infoWindow, html);
    }
  }
  
  function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
Note: Ganti API_KEY dengan kode dari Google API Console
File tampil_map.php melakukan select query ke SQL untuk mengambil data dan di tuangkan dalam interface web. JavaScript dengan function initialize kebawah adalah kode untuk mengatur Marker Map dan informasi yang muncul ketika marker di klik.

4. Hasil Website Akhir
Setelah beberapa tahap mulai dari setup database hingga coding akhirnya websitenya bisa di coba secara maksimal. Beberapa screenshot tampilan hasil akhirnya:

Halaman depan untuk input lokasi baru

Halaman list lokasi

Haman detail menampilkan lokasi berdasarkan koordinat lokasi
Hasil akhir dari website masih sangat standar, Anda bisa melakukan pengembangan sendiri mengenai tampilannya hingga menggunakannya untuk keperluan lainnya sesuai kebutuhan masing-masing.

Jika ada pertanyaan mengenai pembuatan website menyimpan dan menampilkan map dengan PHP, MySQL dan Google Maps API ini silahkan ditanyakan di kolom komentar. Beritahu saya juga jika postingan membantu dan bermanfaat bagi Anda. Semangat.

Untuk membuat lokasi dapat ditampilkan dalam satu map sekaligus, tutorialnya dapat dilihat disini: Membuat Website Menyimpan dan Menampikan Maps Sederhana (Part 2)

*Note: Project ini secara keseluruhan dapat dilihat di github saya (https://github.com/yasirutomo/simple-maps), silahkan ikut menjadi kontributor jika punya ide tentang project ini.

Artikel Terkait

Membuat Website Menyimpan dan Menampilkan Maps Sederhana
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

Tambahkan Komentar Anda