Menampilkan Multi Polygon Arrays di Google Maps

Dipublikasikan oleh El Cicko pada

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


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

15 Komentar

Michael · Desember 12, 2015 pada 7:52 pm

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.

Fangi · Januari 29, 2016 pada 9:15 pm

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

Fangi · Januari 29, 2016 pada 9:17 pm

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

    El Cicko · Januari 30, 2016 pada 12:10 am

    coba pakai drawing tools yang udah disediakan oleh Google Maps.

ipunx · Maret 8, 2016 pada 3:49 am

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

MasMIT · Maret 26, 2016 pada 7:23 pm

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 · Maret 28, 2016 pada 3:11 am

    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

Diar · April 6, 2016 pada 6:39 pm

Cara tambah icon array di tengahnya gmn?

    El Cicko · April 7, 2016 pada 10:48 am

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

joko maruf · Juni 15, 2016 pada 9:04 pm

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

DHANIE · Agustus 1, 2016 pada 2:52 pm

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 · Agustus 1, 2016 pada 4:18 pm

    tinggal ganti aja mas ke ekstensi mysqli 🙂

Iin · Desember 3, 2016 pada 6:45 pm

Berapa banyak jumlah max polygon yg bisa di tampilin??

Iin · Desember 3, 2016 pada 6:46 pm

Berapa banyak polygon yang bisa di buat dalam satu display?

Muhammad Raka · Desember 16, 2016 pada 1:46 pm

Link downloadnya mati pak , mohon di perbaiki

Tinggalkan Balasan

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