Script PHP GIS Google Map Seperti Wikimapia dengan jQuery dan Mysql

Di sini kita akan belajar bagaimana membuat bentuk Rectangle (persegi) dari dua marker yang telah kita buat di google map, menyimpannya dalam database. Kita juga akan belajar bagaimana menampilkan semua daerah-daerah yang telah disimpan menggunakan jquery json, kemudian menampilkan informasi daerah yang telah ditandai menggunakan jendela informasi yang kita buat atau desain sendiri.

Membuat tabel datapeta di database

Berikut adalah struktur tabel datapeta di database MySQL

CREATE TABLE `datapeta` (
  `nomor` int(5) NOT NULL auto_increment,
  `judul` varchar(100) NOT NULL,
  `deskripsi` tinytext NOT NULL,
  `lat1` double NOT NULL,
  `lng1` double NOT NULL,
  `lat2` double NOT NULL,
  `lng2` double NOT NULL,
  `warna` varchar(10) NOT NULL,
  PRIMARY KEY  (`nomor`)
) 

Meloading Google Maps Javascript API

<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"></script>

Menampilkan peta di halaman web

var jakarta = new google.maps.LatLng(-6.237281, 106.332724);
var petaoption = {
    zoom: 14,
    center: jakarta,
    mapTypeId: google.maps.MapTypeId.SATELLITE
};
peta = new google.maps.Map(document.getElementById("petaku"),petaoption);

Sebelumnya kita harus membuat objek <div id="petaku"></div> di web kita, yang berfungsi sebagi tempat google map diletakkan.

Mengambil data daerah yang sudah ditandai dari database, dengan format json

Berikut kode PHP untuk mengambil data dari database MySQL dan menampilkannya dalam format JSON
ambildata.php.

<?php
include "koneksi.php";
$akhir = $_GET['akhir'];
if($akhir==1){
    $query = "SELECT * FROM datapeta ORDER BY nomor DESC LIMIT 1";
}else{
    $query = "SELECT * FROM datapeta";
}
$data = mysql_query($query);

$json = '{"wilayah": {';
$json .= '"petak":[ ';
while($x = mysql_fetch_array($data)){
    $json .= '{';
    $json .= '"id":"'.$x['nomor'].'",
        "judul":"'.htmlspecialchars($x['judul']).'",
        "deskripsi":"'.htmlspecialchars($x['deskripsi']).'",
        "x1":"'.$x['lat1'].'",
        "y1":"'.$x['lng1'].'",
        "x2":"'.$x['lat2'].'",
        "y2":"'.$x['lng2'].'",
        "warna":"'.$x['warna'].'"
    },';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';

$json .= '}}';
echo $json;

?>

{"wilayah":
    {"petak":[
       {"id":"1",
        "judul":"wilayah1",
        "deskripsi":"ini adalah wilayah1",
        "x1":"-6.23728179931641",
        "y1":"106.332725524902",
        "x2":"-6.24197483062744",
        "y2":"106.340789794922",
        "warna":"#FF0000"
       },{
        "id":"2",
        "judul":"wilayah2",
        "deskripsi":"Ini adalah wilayah 2",
        "x1":"-6.22712850570679",
        "y1":"106.345596313477",
        "x2":"-6.22038793563843",
        "y2":"106.353668212891",
        "warna":"#FF0000"
       }
     ]
    }
}

Menampilkan di google map data daerah yang diambil dari database

Sekarang setelah kita mendapatkan data dengan format JSON, kita lihat bagaimana mengakses data JSON dan menampilkannya.

function ambildatabase(akhir){
    if(akhir=="akhir"){
        //url untuk mengambil data paling akhir
        //dieksekusi jika barusan menyimpan data
        url = "ambildata.php?akhir=1";
    }else{
        //url untuk mengambil data semuanya
        url = "ambildata.php?akhir=0";
    }
    $.ajax({
        url: url,
        dataType: 'json',
        cache: false,
        success: function(msg){
            for(i=0;i<msg.wilayah.petak.length;i++){
                judulx[i] = msg.wilayah.petak[i].judul;
                desx[i] = msg.wilayah.petak[i].deskripsi;
                petak = new google.maps.Rectangle({
                    map: peta,
                    fillColor: msg.wilayah.petak[i].warna,
                    fillOpacity: 0.3,
                    strokeColor: msg.wilayah.petak[i].warna,
                    strokeWeight: 1
                });
                var bingkai = new google.maps.LatLngBounds(
                    new google.maps.LatLng(msg.wilayah.petak[i].x1, msg.wilayah.petak[i].y1),
                    new google.maps.LatLng(msg.wilayah.petak[i].x2, msg.wilayah.petak[i].y2)
                );
                petak

opt">.setBounds(bingkai); setinfo(petak,i); } } }); } 

Dari contoh di atas, untuk mengakses judul dari data JSON yang telah kita buat sebelumnya adalah msg.wilayah.petak[i].judul, untuk mengakses deskripsi adalah msg.wilayah.petak[i].deskripsi

Memberi event listener click pada google map

google.maps.event.addListener(peta,'click',function(event){
    kasihtanda(event.latLng);
});

function kasihtanda(lokasi){
    var gambar_tanda = 'tanda.png';
    if(pertama == 0){
        tanda1 = new google.maps.Marker({
            position: lokasi,
            map: peta,
            icon: gambar_tanda
        });
        $("#x1").val(lokasi.lat());
        $("#y1").val(lokasi.lng());
        pertama = 1;
    }else{
        tanda2 = new google.maps.Marker({
            position: lokasi,
            map: peta,
            icon: gambar_tanda
        });
        $("#x2").val(lokasi.lat());
        $("#y2").val(lokasi.lng());
        buat_persegi();
        pertama = 0;
    }

}

function buat_persegi(){
    warnashape = $("#warnaku").val();
    
    //Membuat objek persegi/rectangle
    rectangle = new google.maps.Rectangle({
        map: peta,
        fillColor: warnashape,      //Mengatur warna persegi
        fillOpacity: 0.3,           //Mengatur transaprasi persegi
        strokeColor: warnashape,    //Mengatur warna border persegi
        strokeWeight: 1             //Mengatur ketebalan border
    });
    var latLngBounds = new google.maps.LatLngBounds(
        tanda1.getPosition(),
        tanda2.getPosition()
    );
    rectangle.setBounds(latLngBounds);
    
    //Menghapus kedua tanda/marker yang dibuat sebelumnya
    tanda1.setMap(null);
    tanda2.setMap(null);
}

Menyimpan ke database

$(document).ready(function(){
    $("#tombol_simpan").click(function(){
        var wrna = $("#warnaku").val();
        var x1 = $("#x1").val();
        var y1 = $("#y1").val();
        var x2 = $("#x2").val();
        var y2 = $("#y2").val();
        var judul = $("#judul").val();
        var des = $("#deskripsi").val();
        $("#loading").show();
        $.ajax({
            url: "simpanlokasi.php",
            data: "x1="+x1+"&y1="+y1+"&x2="+x2+"&y2="+y2+"&judul="+judul+"&des="+des+"&wrn="+wrna,
            cache: false,
            success: function(msg){
                alert(msg);
                $("#loading").hide();
                $("#x1").val("");
                $("#y1").val("");
                $("#x2").val("");
                $("#y2").val("");
                $("#judul").val("");
                $("#deskripsi").val("");
                ambildatabase('akhir');
                rectangle.setMap(null);
            }
        });
    });
    $("#tutup").click(function(){
        $("#jendelainfo").fadeOut();
    });
});

Kode lengkapnya

Untuk kode lengkapnya langsung download source code

tutorial-dasa-koneksi-php-dan-mysql

Artikel Terkait di Bawah posting

GIS

• Membuat GIS Google Map Marker Multi Icon dengan jQuery, PHP dan MySQL
• Membuat GIS (Google Map Marker Multi Icon) dengan jQuery, PHP dan MySQL
• KONSEP DASAR WEB GIS
• Konsep Sistem Informasi Geografis (SIG)

php

• Script PHP Untuk Membuat Web Thumbnail / Screen Shot
• Update Data Suatu Tabel Bersumber Dari Tabel Lain Dengan Query SQL
• Script PHP Menampilkan Artikel Terkait
• Script php untuk membuat grafik
• Mencari Tingkat Text Similarity dengan PHP
• Cara install Wammu untuk/for ubuntu
• Contoh Relasi SQL antar tabel
• Problem Warning/Error Timezone di PHP
• Membuat Login Alternatif (Open ID) dengan Php
• Plugin Auto Forward SMS Inbox (Sms Gateway)
• Membuat barcode dengan php (Script)
• Membuat Website Dinamis Dengan PHP & MySQL
• Script PHP Update Status TWITTER via SMS
• Cara Import Database mysql di Phpmyadmin
• Pasang Social Bookmark | jQuery
• Optimalkan SEO on page tingkatin pagerank
• Membuat User Online dengan PHP
• Hit Counter Sederhana dengan PHP
• Membuat kamus Teknologi Informasi dengan PHP
• Script wall facebook gratis dengan php dan jquery
• Script PHP dan MySQL untuk kirim SMS Via Web
• Script Notifikasi Seperti Facebook dengan jQuery dan PHP
• Memasang ReCaptcha di PHP
• Script PHP Untuk Backup MySQL

api

• Script php Penyingkat URL Shortener dengan API Google

Posted in: api, GIS, php, PHP AJAX jQuery