Press "Enter" to skip to content

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 Comments

  1. Michael Michael Desember 12, 2015

    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.

  2. Fangi Fangi Januari 29, 2016

    mas kalau igin buat polygon sendiri trus ke simpan ditabasae gimana caranya..?

  3. Fangi Fangi Januari 29, 2016

    mas kalau buat sendiri polygonnya trus disimpan ke databse gimana caranya?…tolong pencerahan.

    • El Cicko El Cicko Post author | Januari 30, 2016

      coba pakai drawing tools yang udah disediakan oleh Google Maps.

  4. ipunx ipunx Maret 8, 2016

    kalau mau nampilin wilayah suatu area(misal batas wilayah kabupaten) bisa gak??
    saya disini punya file KML nya aja.

  5. MasMIT MasMIT Maret 26, 2016

    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

    • El Cicko El Cicko Post author | Maret 28, 2016

      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

  6. Diar Diar April 6, 2016

    Cara tambah icon array di tengahnya gmn?

    • El Cicko El Cicko Post author | April 7, 2016

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

  7. joko maruf joko maruf Juni 15, 2016

    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

  8. DHANIE DHANIE Agustus 1, 2016

    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..

    • El Cicko El Cicko Post author | Agustus 1, 2016

      tinggal ganti aja mas ke ekstensi mysqli 🙂

  9. Iin Iin Desember 3, 2016

    Berapa banyak jumlah max polygon yg bisa di tampilin??

  10. Iin Iin Desember 3, 2016

    Berapa banyak polygon yang bisa di buat dalam satu display?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *