January 29, 2017

Membuat Website Menyimpan dan Menampikan Maps Sederhana (Part 2: Showing All Location)

Artikel ini akan melanjutkan postingan tentang membuat website untuk menyimpan dan menampilkan maps sederhana. Pada artikel tersebut, kita berhasil membuat sebuah website yang dapat mengimput koordinat sebuah lokasi dan menyimpannnya dalam database. Menampilkan kembali lokasi telah dijelaskan pada artikel tersebut dengan memilih satu lokasi yang ingin dilihat.

Nah, pertanyaan yang ingin dijawab pada artikel part ke-2 ini adalah Bagaimana caranya kita dapat menampilkan semua lokasi tersebut dalam satu maps yang sama? Kira-kira gambarnya seperti ini:

Menampilkan semua lokasi dalam satu map

Jadi pengembangan ini berawal dari sebuah pesan whatsapp yang saya terima pagi ini. Salah satu pembaca artikel Membuat Website Menyimpan dan Menampikan Maps Sederhana menanyakan bisakah aplikasi tersebut dikembangkan agar dapat menampilkan semua lokasi sekaligus dalam satu map.
Bisa dek :)

Sebelumnya, saya yakin pernah membuat lokasinya dapat tampil sekaligus. Karna lupa taruh dimana maka harus dibuat lagi. Dan syukur karna pertanyaan adik ini saya jadi ada bahan menulis artikel lagi (wkwk).

Untuk membuat semua lokasi dapat ditampilkan secara bersamaan, dari coding artikel sebelumnya, kita hanya perlu menambah satu file untuk menghandle masalah ini. Jika ada yang belum membaca artikel Membuat Website Menyimpan dan Menampikan Maps maka saya sarankan untuk memulai dari artikel tersebut, karna artikel ini merupakan pengembangan dari apa yang telah dilakukan pada artikel sebelumnya.

Silahkan buat file semua.php, isi dengan kode berikut:
<?php
/*
Author : Muhammad Nur Yasir Utomo
Email : yasirutomo@gmail.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> --> <!-- old version, doesnt work in localhost --> 
  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false" type="text/javascript"></script>

  <script>
    var marker;
      function initialize() {
        // Variabel untuk menyimpan informasi (desc)
        var infoWindow = new google.maps.InfoWindow;
        //  Variabel untuk menyimpan peta Roadmap
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        } 
        // Pembuatan petanya
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        // Variabel untuk menyimpan batas kordinat
        var bounds = new google.maps.LatLngBounds();

        // Pengambilan data dari database
        <?php
            $query = mysql_query("select * from lokasi");
            while ($data = mysql_fetch_array($query))
            {
                $nama = $data['nama'];
                $lat = $data['lat'];
                $lon = $data['lng'];
                
                echo ("addMarker($lat, $lon, 'Lokasi : $nama<br/>Latitude : $lat<br/>Longitude : $lon');\n");                      
            }
          ?>
          
        // Proses membuat marker 
        function addMarker(lat, lng, info) {
            var lokasi = new google.maps.LatLng(lat, lng);
            bounds.extend(lokasi);
            var marker = new google.maps.Marker({
                map: map,
                position: lokasi
            });       
            map.fitBounds(bounds);
            bindInfoWindow(marker, map, infoWindow, info);
         }
        
        // Menampilkan informasi pada masing-masing marker yang diklik
        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>

 </head>
 
 <body>
  <a href="index.php">Input Lokasi</a> | 
  <a href="tampil.php">Lihat Daftar Lokasi </a> |
  <a href="semua.php">Semua Lokasi</a><br/><br/>
  <div class="panel-body">
      <div id="map-canvas" style="width:500px;height:300px;"></div>
  </div>
 </body>
</html>

Dari kode diatas, beberapa hal yang perlu di perhatikan adalah:

  • Ganti API_KEY sesuai dengan API_KEY Google Maps Anda, cara mendapatkannya dapat dilihat disini.
  • Include inc/config.php merupakan file untuk menghandle koneksi database.
  • Pada bagian javascript kita dapat melihat bagian // Pengambilan data dari database, merupakan bagian yang melakukan pengambilan data dari tabel lokasi, kemudian dilakukan perulangan sebanyak data yang ada untuk di tampilkan dalam map.
  • Masih pada bagian // Pengambilan data dari database terdapat kode:
    echo ("addMarker($lat, $lon, 'Lokasi : $nama<br/>Latitude : $lat<br/>Longitude : $lon');\n");
    Kode ini yang bekerja untuk menampilkan marker dengan deskripsinya saat di klik. format yang kita gunakan adalah nama lokasi, latitude dan longitude. Ini bisa diubah sesuai kebutuhan.

Hasilnya, jika digabung dengan project sebelumnya menghasilkan tampilan sebagai berikut:
Hasil akhir

Code project ini dapat dilihat secara penuh di Github: https://github.com/yasirutomo/simple-mapsBagi yang memiliki ide pengembangan silahkan ikut berkontribusi. :)

Artikel Terkait

Membuat Website Menyimpan dan Menampikan Maps Sederhana (Part 2: Showing All Location)
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

Tambahkan Komentar Anda