April 1, 2017

Membuat Website Menyimpan dan Menampikan Maps Sederhana (Part 3: Custom Marker)

Satu lagi artikel pada series artikel web map. Kali ini artikel akan berfokus pada custom marker location. Apa itu custom marker, kegunaannya, dan bagaimana cara membuatnya akan kita bahas bersama secara singkat dan padat pada kesempatan ini.

Web Map Series:
  1. Membuat Website Menyimpan dan Menampikan Maps Sederhana (Part 1) 
  2. Membuat Website Menyimpan dan Menampikan Maps Sederhana (Part 2: Showing All Location) 
  3. Membuat Website Menyimpan dan Menampikan Maps Sederhana (Part 3: Custom Marker) 

Custom Marker
Sebuah lokasi pada sebuah map selalu di tunjukkan oleh sebuah marker, yaitu penanda lokasi agar lebih mudah dikenali dan dilihat. Google Maps sebagai layanan yang sering digunakan dalam menampilkan map pada berbagai layanan digital pada dasarnya memiliki marker bawaan yang iconic, namun Google Maps juga mempersilahkan usernya jika ingin melakukan kustomisasi marker dengan berbagai tujuan. Custom marker ini dapat diganti dengan gambar dengan format umum, biasanya .jpg atau .png, namun format gambar .png lebih sering digunakan karna sifatnya yang lebih fleksibel terhadap gambar dengan background transparan.

Kegunaan Custom Marker
Kegunaan dan manfaat dari penggunaan custom marker pada sebuah map sangat beragam sesuai dengan kasusnya. Custom marker dapat menjadi pembeda kategori lokasi, misalnya lokasi PDAM dan PLN yang ditampilkan satu map namun dengan marker berbeda agar terlihat lebih jelas. Bisa juga digunakan sebagai penanda status tempat, bisa juga sebagai penanda lokasi khusus tertentu.

Membuat Custom Marker
Dari project sebelumnya, yaitu pada artikel Web Map Part1 dan Part2, tambahkan sebuah file dengan mana cusmark.php, dan isi dengan code 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 WHERE nama!='bandung'");
            while ($data = mysql_fetch_array($query))
            {
                $nama = $data['nama'];
                $lat = $data['lat'];
                $lon = $data['lng'];

                if($nama == 'Ke Semarang'){
                  $image = 'images/red_mark.png';
                }else{
                  $image = 'images/def_mark.png';
                }
                
                echo ("addMarker($lat, $lon, '$image','Lokasi : $nama<br/>Latitude : $lat<br/>Longitude : $lon');\n");                      
            }

            $squery = mysql_query("SELECT * FROM lokasi WHERE nama='bandung'");
            while ($sdata = mysql_fetch_array($squery))
            {
                $nama = $sdata['nama'];
                $lat = $sdata['lat'];
                $lon = $sdata['lng'];

                $image = 'images/blue_mark.png';
                
                echo ("addMarker($lat, $lon, '$image','Lokasi : $nama<br/>Latitude : $lat<br/>Longitude : $lon');\n");                      
            }
          ?>
          
        // Proses membuat marker 
        function addMarker(lat, lng, img, info) {
            var lokasi = new google.maps.LatLng(lat, lng);
            bounds.extend(lokasi);
            var marker = new google.maps.Marker({
                map: map,
                position: lokasi,
                icon: img
            });       
            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> |
  <a href="cusmark.php">Custom Marker</a><br/><br/>
  <div class="panel-body">
      <div id="map-canvas" style="width:500px;height:300px;"></div>
  </div>
 </body>
</html>
Catatan: Ganti API_KEY dengan code API_KEY anda dari Google Maps, baca: membuat API Key Goole Maps

Penjelasan
1. Filter SQL Query
Karna data yang gunakan merupakan data dari database (baca: part 1), maka untuk membedakan sebuah tempat dari yang lain dapat dilakukan dengan search atau filter dari query sql. Dilihat dari code diatas, terdapat 2 query sql untuk mangambil lokasi dari database, fungsi $query yaitu mengambil semua data dari database yang bukan 'bandung' (where nama not bandung / where != 'bandung') dan $squery adalah query untuk mencari lokasi dengan nama bandung. Ini juga menunjukkan bahwa canvas Google Maps dapat menerima data dari multiple sql query pada satu map. Selanjutnya hasil dari query 1 dan query 2 dibedakan markernya yang ditunjukkan dengan variable $image yang berisi nama gambar berbeda.

2. Filter IF-ELSE
Filter juga dapat dilakukan dengan hanya memanfaatkan pengkondisian IF-ELSE. Pada kode diatas, contoh pengkondisian dilakukan untuk membedakan marker nama lokasi 'Ke Semarang'. Jika nama lokasi ditemukan maka marker yang tampil adalah red_mark.png, jika tidak mark yang ditampilkan adalah def_mark.png.

3. Parameter Icon pada Google Maps API
Hasil tiap query filter yang dilakukan berserta custom imagenya masing-masing di kirim pada function addMarker. Pada function tersebut terdapat sebuat parameter untuk mengatur gambar icon sesuai kebutuhan yang diterima dari hasil query sebelumnya. Penggunaaannya ditunjukkan dengan kode icon: img.

Hasil
Hasil Custom Marker
Marker hitam menandakan lokasi yang bukan 'Semarang' dan 'Bandung', marker Merah menandakan lokasi 'Semarang' dan marker Pin Biru menandakan lokasi 'Bandung'.

Complete Code
Kode lengkap dari project ini dapat dilihat pada Github:
https://github.com/yasirutomo/simple-maps
Silahkan ikut berkontribusi. Jika ada ide, saran dan pertanyaan mengenai artikel ini silahkan sampaikan melalui komentar. Terimakasih.

Artikel Terkait

Membuat Website Menyimpan dan Menampikan Maps Sederhana (Part 3: Custom Marker)
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

Tambahkan Komentar Anda