Menampilkan Multi Polygon Arrays di Google Maps

Menampilkan Multi Polygon Arrays di Google Maps

Dulu saya pernah membahas tentang bagaimana cara menampilkan Polygon dengan KML di Google Maps.  Pada artikel itu saya menjelaskan tentang metode KML yang digunakan untuk menampilkan Nah, Pada tutorial kali ini saya akan membahas tentang bagaimana cara untuk menampilkan Multi Polygon Arrays di Google Maps dengan menggunakan PHP, MySQL dan jQuery. 

Polygon Arrays di Google Maps #Apa itu Polygon Arrays ?

Polygon Arrays adalah sebuah fitur baru dari Google Maps API versi 3 dengan menggunakan sekumpulan koordinat yang dibentuk menjadi sebuah array. Setiap polygon dapat memiliki behaviour dan properties yang berbeda dengan polygon yang lainnya. Misalkan saya ingin menampilkan 2 polygon dengan warna yang berbeda, itu semua bisa dilakukan. Perbedaan dari Polygon KML dengan Polygon Arrays adalah kita dapat menampilkan Polygon Arrays di Google Maps secara dinamis dari database.

Polygon Arrays di Google Maps #Apa itu Multi Polygon Arrays ?

Multi Polygon Arrays dapat diartikan sebagai sekumpulan atau banyak polygon. Jadi kita kita akan menampilkan beberapa polygon arrays di Google Maps.

OK, sekarang kita akan mulai membuat aplikasi sederhana untuk menampilkan multi polygon arrays di Google Maps. Saya ambil contoh kasus kecil misalnya Aplikasi Pemetaan Sawah di Karawang. Fungsinya adalah untuk menampilkan data sawah yang sudah di mark atau di blok dengan Polygon, disini kita akan menampilkan data lahan sawah berdasarkan kecamatan dan juga status lahan sawah itu sendiri.

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&amp;libraries=drawing&geometry" type="text/javascript"></script>
<script src="app.js"></script>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <?php require('connect.php'); ?>
            <h2>Multi Polygon Arrays di Google Maps</h2>
            <select class="form-control" name="status">
                <option value="">Silahkan Pilih Status</option>
                <?php
                    $sql = mysql_query("SELECT * FROM `status`"); 
                    while($val = mysql_fetch_array($sql)) { 
                        echo '<option value="'.$val['id'].'">'.$val['nama_status'].'</option>'; } 
                ?>
            </select>
            <button id="search" class="btn btn-primary" type="button">Cari Lokasi Lahan</button>
            <table class="table" border="0">
            <tbody>
            <tr>
                <td>
                    <select class="form-control" name="kecamatan">
                        <option value="">Silahkan Pilih Kecamatan</option>
                        <?php 
                            $sql = mysql_query("SELECT * FROM `kecamatan`"); 
                            while($val = mysql_fetch_array($sql)) { 
                            echo '<option value="'.$val['id'].'">'.$val['nama_kecamatan'].'</option>'; } 
                        ?>
                    </select>
                </td>
            </tr>
            </tbody>
            </table>
            <div id="map-canvas" style="width: 100%; height: 700px;"></div>
        </div>
    </div>
    <hr />
</div>
<?php 
header('Content-Type: application/json');
require ('connect.php'); 
$sql = "SELECT 
        a.*, 
        `b`.`nama_kecamatan` as `nama_kecamatan`, 
        `c`.`nama_status` as `nama_status`, `c`.`warna` as `warna` 
        FROM `lokasi_lahan` AS `a` 
        JOIN `kecamatan` AS `b` ON a.kecamatan = b.id 
        JOIN `status` AS `c` ON a.status = c.id 
        ORDER BY `a`.`id`"; 

$data = mysql_query($sql); 
$json = '{"karawang": {'; 
$json .= '"lahan":[ '; 
while($x = mysql_fetch_assoc($data)) { 
    $json .= '{'; 
    $json .= '"id":"'.$x['id'].'", "nama_lokasi":"'.htmlspecialchars($x['nama_lokasi']).'", "kecamatan":"'.htmlspecialchars($x['nama_kecamatan']).'", "status":"'.$x['nama_status'].'", "keterangan":"'.htmlspecialchars($x['keterangan']).'", "alamat":"'.htmlspecialchars($x['alamat']).'", "polygon":"'.$x['polygon'].'", "warna":"'.$x['warna'].'" },'; 
} 

$json = substr($json,0,strlen($json)-1); 
$json .= ']'; 
$json .= '}}'; 

echo $json; 
?>
<?php 

header('Content-Type: application/json'); 
require ('connect.php'); 
$kecamatan = isset($_GET['kecamatan']) ? $_GET['kecamatan'] : ''; 
$status = isset ($_GET['status']) ? $_GET['status'] : ''; 
$q = ''; 

if ($kecamatan != '' && $status == '') { 
    $q = "WHERE `a`.`kecamatan` = '".$kecamatan."'"; 
}

if ($kecamatan != '' && $status != '' ) { 
    $q = "WHERE `a`.`status` = '".$status."' AND `a`.`kecamatan` = '".$kecamatan."'"; 
}

if ($kecamatan == '' && $status != '') { 
    $q = "WHERE `a`.`status` = '".$status."'"; 
} 

if ($kecamatan == '' && $status == '') { 
    $q = ""; 
} 

$sql = "SELECT 
        a.*, 
        `b`.`nama_kecamatan` as `nama_kecamatan`, 
        `c`.`nama_status` as `status`, `c`.`warna` as `warna` 
        FROM `lokasi_lahan` AS `a` 
        JOIN `kecamatan` AS `b` ON a.kecamatan = b.id 
        JOIN `status` AS `c` ON a.status = c.id ".$q." 
        ORDER BY `a`.`id`"; 

$data = mysql_query($sql); 
$json = '{"karawang": {'; 
$json .= '"lahan":[ '; 
$polygon = ''; 

if ($data) { 
    while($x = mysql_fetch_assoc($data)) { 
        $json .= '{'; 
        $json .= '"id":"'.$x['id'].'", "nama_lokasi":"'.htmlspecialchars($x['nama_lokasi']).'", "kecamatan":"'.htmlspecialchars($x['nama_kecamatan']).'", "status":"'.$x['status'].'", "keterangan":"'.$x['keterangan'].'", "alamat":"'.$x['alamat'].'", "polygon":"'.$x['polygon'].'", "warna":"'.$x['warna'].'" },'; 
    } 

    $json = substr($json,0,strlen($json)-1); 
    $json .= ']'; 
    $json .= '}}'; 
    echo $json; 
} else { 
    echo ""; 
} 

?>
var nama = [];
var kecamatan = [];
var alamat = [];
var keterangan = [];
var status_lokasi = [];
var lokasi = [];
var cords = '';
var area = [];
var infoWindow;

function peta_awal(){
    var karawang = new google.maps.LatLng(-6.284600, 107.381583);
    var petaoption = {
        zoom: 11,
        center: karawang,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    url = "ambildata.php";
    $.ajax({
        url: url,
        dataType: 'json',
        cache: false,
        success: function(msg){
            var polygon;
            var cords = [];
            for(i=0;i<msg.karawang.lahan.length;i++){
                nama[i] = msg.karawang.lahan[i].nama_lokasi;
                kecamatan[i] = msg.karawang.lahan[i].kecamatan;
                alamat[i] = msg.karawang.lahan[i].alamat;
                status_lokasi[i] = msg.karawang.lahan[i].status;
                keterangan[i] = msg.karawang.lahan[i].keterangan;
                lokasi[i] = msg.karawang.lahan[i].polygon;
               
                var str = lokasi[i].split(" "); 
                
                for (var j=0; j < str.length; j++) { 
                    var point = str[j].split(",");
                    cords.push(new google.maps.LatLng(parseFloat(point[0]), parseFloat(point[1])));
                }

               var contentString = '<b>'+nama[i]+'</b>'+
                                    'Alamat: '+ alamat[i] +'' +
                                    'Kecamatan: '+ kecamatan[i] +'' +
                                    'Keterangan: '+ keterangan[i] +'' +
                                    'Status Lokasi : '+ status_lokasi[i] +'';

                polygon = new google.maps.Polygon({
                    paths: [cords],
                    strokeColor: msg.karawang.lahan[i].warna,
                    strokeOpacity: 0,
                    strokeWeight: 1,
                    fillColor: msg.karawang.lahan[i].warna,
                    fillOpacity: 0.5,
                    html: contentString
                });     

                cords = []; 
                polygon.setMap(peta); 
                infoWindow = new google.maps.InfoWindow();
                google.maps.event.addListener(polygon, 'click', function(event) {
                    infoWindow.setContent(this.html);
                    infoWindow.setPosition(event.latLng);
                    infoWindow.open(peta);
                });
            }               
        }
    });
}

$(document).ready(function(){
    $("#search").click(function(){
        var kecamatan  = $("#kecamatan").val();
        var status     = $("#status").val();
        $.ajax({
            url: "caripeta.php",
            data: "kecamatan="+kecamatan+"&amp;status="+status,
            dataType: 'json',
            cache: false,
            success: function(msg) {
                var karawang2 = new google.maps.LatLng(-6.284600, 107.381583);
                var petaoption2 = {
                    zoom: 11,
                    center: karawang2,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

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

                var polygon;
                var cords = [];
                for(i=0;i<msg.karawang.lahan.length;i++){
                    nama[i] = msg.karawang.lahan[i].nama_lokasi;
                    kecamatan[i] = msg.karawang.lahan[i].kecamatan;
                    alamat[i] = msg.karawang.lahan[i].alamat;
                    status_lokasi[i] = msg.karawang.lahan[i].status;
                    keterangan[i] = msg.karawang.lahan[i].keterangan;
                    lokasi[i] = msg.karawang.lahan[i].polygon;
                    
                    var str = lokasi[i].split(" "); 
                    
                    for (var j=0; j < str.length; j++) { 
                        var point = str[j].split(",");
                        cords.push(new google.maps.LatLng(parseFloat(point[0]), parseFloat(point[1])));
                    }

                    var contentString = '<b>'+nama[i]+'</b>' +
                                        'Alamat: '+ alamat[i] +'' +
                                        'Kecamatan: '+ kecamatan[i] +'' +
                                        'Keterangan: '+ keterangan[i] +'' +
                                        'Status Lokasi : '+ status_lokasi[i] +'';
                                        
                    polygon = new google.maps.Polygon({
                        paths: [cords],
                        strokeColor: msg.karawang.lahan[i].warna,
                        strokeOpacity: 0,
                        strokeWeight: 1,
                        fillColor: msg.karawang.lahan[i].warna,
                        fillOpacity: 0.5,
                        html: contentString
                    });     

                    cords = [];

                    polygon.setMap(peta2); 
                    google.maps.event.addListener(polygon, 'click', function(event) {
                        infoWindow.setContent(this.html);
                        infoWindow.setPosition(event.latLng);
                        infoWindow.open(peta2);
                    });
                }
            }
        });
    });
});

Output dari script diatas adalah sebagai berikut :

output-polygon-array-google-maps

Kamu bisa mendownload full source code untuk menampilkan Multi Polygon Arrays di Google Maps ini pada link dibawah. Silahkan dicoba dan semoga bermanfaat. 😀

download

15 pemikiran pada “Menampilkan Multi Polygon Arrays di Google Maps”

  1. Bagaimana cara mengetahui koordinat dari suatu polygon? Misalnya saya ingin mencari koordinat kabupaten berau, kalimantan. Bagaimana cara mengetahui koordinat dari kabupaten Berau tersebut? Terima kasih.

    Balas
  2. Halo mas Elcicko, Thanks buat info2 mengenai Google mapsnya, Mau tanya dong, kalo saya mau buat aplikasi bus kota menggunakan google maps, PHP dan Mysql, tulisan mana ya yang paling cocok sebagai dasar, jadi nanti rutenya bakal dibuat menggunakan garis di Google Maps, dan garis2 tsb. Bakal kesimpen di Mysql. Gitu, Thanks Before

    Balas
    • coba pakai drawing tools dari Google Maps mas, pakai opsi polyline dan dibuat agar polyline yang sudah dibuat dapat disimpan dalam sebuah texfield agar bisa disimpan ke database

      Balas
    • Sebenernya untuk menambahkan icon marker di tengah polygonnya cuman bisa dilakukan waktu kita melakukan input polygonnya. Kebetulan saya ga menulis studi kasusnya…hehehe

      Balas
  3. Mas terimakasih sebelumnya telah memberi tutorial tentang ini, ini saya mmpunyai masalah pada jquerynya pada saat kita mencari wilayah berdasarkan kabupaten yang ditampilkan melalui combo box, ketika saya pilih dan saya klik tombol cari tidak berubah apa2, sudah saya cek sama semua masing-masing nama variable nya, kira2 mas tau g ya masalahnya dimana?? mohon pencerahanyya trims

    Balas
  4. sebelumnya terimakasih buat tutorialnya, Tapi saya ingin memberi saran. Berdasarkan hasil googling untuk koneksi database-nya saat ini menggunakan fungsi mysql_* sudah tidak bisa digunakan pada PHP7, untuk itu mohon tutorialnya dimodifikasi bagian koneksi databasenya menggunakan fungsi PDO. terimakasih..

    Balas

Tinggalkan komentar