Menambahkan dan menampilkan data dari database ke peta google map

Halo sahabat programmer..
Mari kita lanjutkan lagi belajar kita tentang membuat web gis dengan memanfaatkan google map. tutorial ini adalah lanjutan dari dua tutorial kita sebelumnya yaitu Dasar Pemrograman web GIS dengan Google Map API v3 dan Menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3 Jika anda belum membaca saya sarankan untuk menyempatkan membacanya terlebih dahulu.

Baiklah, pada tulisan kali ini programmer goblog bakalan membahas tentang menyimpan dan mengambil data koordinat titik pada database mysql menggunakan PHP sebagai bahasa pemrograman server side nya.

Pada tutorial sebelumnya kita telah membahas tentang apa itu web gis dan juga membahas bagaimana menambahkan titik pada peta. pada tutorial kali ini kita akan belajar bagaimana menyimpan data koordinat titik tersebut beserta keteranganya kedalam database mysql.

Pertama kita akan meyiapkan database nya terlebih dahulu, silahkan sobat buat database dan table nya menggunakan sintak sql berikut.
  

create database belajargis;
use belajargis;
create table tempat(
    id_tempat int not null auto_increment primary key,
    latlng varchar(100) not null,
    nama_tempat varchar(100) not null,
    keterangan_tempat text
    )

nah kira kira seperti gambar dibawah ini struktur database yang kita buat.

baiklan, selanjutnya kita akan menambahkan form untuk tambah data pada script map.html kita dari tutorial sebelumnya.

tambahkan baris kode berikut di tempat yang bertanda biru seperti gambar dibawah ini.

 var form = '<h4>Tambah Data</h4><form id="formtambahdata" method="post" action="simpan.php"><br><input type="text" id="nama" placeholder="nama tempat" name="nama"><br><textarea id="keterangan" name="keterangan" placeholder="Isi Keterangan tempat"></textarea><br><input type="text" id="latlng" name="latlng" value="'+lat+','+lng+'"><br><input type="submit" value="Simpan"></form>';  

Refresh halaman web kita, hasilnya kira-kira seperti gambar dibawah ini.

nah selanjutnya kita akan membuat sebuah file simpan.php untuk menyimpan data dalam form tersebut ke database.

 <?php  
 mysql_connect('localhost','root',''); // membuka koneksi ke database mysql  
 mysql_select_db('belajargis'); //memilih database yang akan digunakan  
 $nama_tempat = $_POST['nama']; // mengambil data dari form  
 $keterangan = $_POST['keterangan'];// mengambil data dari form  
 $latlng = $_POST['latlng'];// mengambil data dari form  
 $query = "insert into tempat (nama_tempat,keterangan_tempat,latlng) values('$nama_tempat','$keterangan','$latlng')";// query untuk insert data ke database  
 if(mysql_query($query)){  
      header('location:map.html'); // mengarahkan ke halaman map.html lagi setelah data berhasil tersimpan  
 }  
 ?>  

mari kita coba inputkan data.
caranya pada peta kita klik kanan, klik ok kemudian akan muncul sebuah marker baru. arahkan kursor mouse ke marker yang baru tersebut. dan akan tampil form seperti gambar dibwah ini.
Inputkan data pada kolom nama tempat dan keterangan.

Selanjutnya kita cek di database mysql kita apakah data berhasil tersimpan.

ya, data tersimpan dengan benar.
dengan cara yang sama coba kita tambahkan beberapa data lagi,

kok di peta belum muncul yah data yang kita tambahkan??? muncul pertanyaan seperti ini di benak anda?
Ya, itu karena kita belum menambahkan script untuk mengambil data ini dari database.
Selanjutnya kita akan menampilkan data dari database ke peta.
pertama kita rename dulu file map.html kita agar menjadi map.php

selanjutnya kita akan menyisipkan beberapa baris kode php kedalam file map.php tersebut.
buka file map.php dan cari baris kode yang ditandai dalam kotak putih.

 kemudian ganti dengan kode berikut.

  <?php  
           mysql_connect('localhost','root','');  
           mysql_select_db('belajargis');  
           $query="select * from tempat";  
           $datas = mysql_query($query);  
           while ($data=mysql_fetch_array($datas)) {  
             ?>  
             ["<?php echo $data['nama_tempat'];?>", <?php echo $data['latlng']; ?> ,1, "<h4><?php echo $data['nama_tempat'];?></h4><p><?php echo $data['keterangan_tempat'];?></p>"],  
             <?php  
           }  
         ?>  

sehingga menjadi seperti gambar berikut ini.

Baiklah jika sudah, mari kita buka file map.php kita tadi dengan menggunakan browser kesayangan sobat masing masing.
kira kira hasilnya seperti gambar dibawah ini.

nah, sekarang data yang tampil sudah sesuai dengan data yang kita tambahkan tadi,,
sebagai catatan, file simpan.php dan map.php harus berada dalam satu folder/directory ya, dan harus didalam web server, dalam kasus penulis kedua file ini berada didalam folder 'belajargis' didalam folder htdocs pada web server xampp..

Tambahan, jangan lupa ganti text header('location:map.html'); di file simpan.php menjadi header('location:map.php');

Baiklah, sampai disini kita sudah bisa menambahkan dan menampilkan data dari database ke peta google map.
Bagi yang membutuhkan file lengkapnya silahkan download disini
Jika sobat programmer merasa tulisan ini bermanfaat, jangan lupa untuk share agar orang lain juga bisa dengan mudah menemukan tulisan ini. terimakasih telah berkunjung dan belajar bersama Programmer GoBlog..

Read More

Menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3

Hai sobat programmer. Programmer GoBlog baglik lagi dengan tutorial web gis dengen google map. Sebelumnya di tutorial Dasar Pemrograman web GIS dengan Google Map API v3 Kita telah mengenal GIS dan mencoba membuat web gis sederhana untuk menampilkan titik-titik koordinat tertentu di peta google map. Nah kali ini kita akan melanjutkan web GIS kita dengan menambahkan fungsi tambahan pada web kita agar user dapat menambahkan titik tertentu di peta dengan melakukan klik kanan pada peta tersebut.

Tutorial ini merupakan tutorial lanjutan dari Dasar Pemrograman web GIS dengan Google Map API v3 bagi yang belum mebaca saya sarankan untuk membacanya terlebih dahulu sebelum mengikuti tutorial ini, namun tidak menjadi sebuah keharusan karena anda tetap bisa mengikuti tutorial ini dengan beberapa penyesuaian.

Baiklan, kita buka lagi file tutorial web gis menggunakan google map api v3 kita dari tutorial sebelumnya. Sekarang kita tambahkanbaris berikut dipaling bawah sebelum tutup tag </script>

1:  function setAction(map){  
2:            
3:          google.maps.event.addListener(map, "rightclick", function(event) {  
4:    
5:          if(confirm("Tandai Titik Ini? (klik pada tanda yang muncul untuk melihat pilihan)")){  
6:            var lat = event.latLng.lat();  
7:            var lng = event.latLng.lng();  
8:              
9:            var siteLatLng = new google.maps.LatLng(lat, lng);  
10:            var marker = new google.maps.Marker({  
11:                position: siteLatLng,  
12:                map: map,  
13:                title: "add data",  
14:                zIndex: 100,  
15:                html: "ddd"  
16:    
17:              });  
18:             google.maps.event.addListener(marker, "mouseover", function () {  
19:                  
20:                infowindow.setContent(this.html);  
21:                infowindow.open(map, this);  
22:              });  
23:    
24:          }  
25:            
26:        });  
27:        }  

selanjutnya kita perlu memanggil fungsi
setAction(map);
melalui fungsi initialize();
tempatkan baris code

setAction(map); 

dibawah baris setMarkers(map,sites);

berukut merupakan keseluruhan kode kita.

1:  <html>  
2:  <head>  
3:   <title></title>  
4:  </head>  
5:  <body>  
6:  <div id="map_canvas" style="width:100%; height:100%;">  
7:    
8:       
9:    </div>  
10:  </body>  
11:  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
12:  <script type="text/javascript">  
13:  var infowindow = null;  
14:  (function() {  // fungsi untuk dijalankan ketika halaman web dubuka  
15:     
16:      
17:   initialize(); // mengeksekusi fungsi initialize()  
18:     
19:  })();  
20:      
21:    
22:    function initialize() {  
23:        // Baris berikut digunakan untuk mengisi marker atau tanda titik di peta  
24:        var sites = [  
25:    
26:         ['Polinela', -5.358725,105.233413 ,1, '<h4>Politeknik Negeri Lampung</h4><p>Keterangan didalam marker</p>'], // pertama merupakan judul market, kedua adalah titik koordinan latitude, ketiga longitude, dan keempat merupakan z index (titik mana yang ditampilkan lebih dulu) untuk menentukan titik mana diatas titik mana, ketiga merupakan isi keterangan marker nya.  
27:         ['Unila', -5.364505,105.243442 ,2, '<h4>Universitas Lampung</h4><p>Keterangan didalam marker</p>'],  
28:    
29:        ];  
30:        var centerMap = new google.maps.LatLng(-5.387625, 105.249326); // mengatur pusat peta  
31:          
32:        var myOptions = {  
33:          zoom: 13, // level zoom peta  
34:          center: centerMap, // setting pusat peta ke centerMap  
35:          mapTypeId: google.maps.MapTypeId.ROADMAP //menentukan tipe peta  
36:        }  
37:    
38:        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //menempatkan peta pada div dengan ID map_canvas di html  
39:    
40:        setMarkers(map, sites); // memanggil fungsi setMarker untuk menandai titik di peta.  
41:        setAction(map); //tambahan dari tutorial 2 untuk memanggil fungsi setAction(map);  
42:        infowindow = new google.maps.InfoWindow({  
43:            content: "loading..."  
44:          });  
45:    
46:        var bikeLayer = new google.maps.BicyclingLayer();  
47:        bikeLayer.setMap(map); //memnunculkan peta  
48:          
49:      }  
50:    
51:        
52:    
53:    
54:    
55:        function setMarkers(map, markers) {  
56:         //berikut merupakan perulangan untuk membaca masing masing titik yang telah kita definisikan di sites[];  
57:        for (var i = 0; i < markers.length; i++) {  
58:          var sites = markers[i];  
59:          var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);  
60:          var marker = new google.maps.Marker({  
61:            position: siteLatLng,  
62:            map: map,  
63:            title: sites[0],  
64:            zIndex: sites[3],  
65:            html: sites[4]  
66:    
67:          });  
68:    
69:          var contentString = "Some content";  
70:          // berikut merupakan fungsi untuk mengatur agar keterangan marker muncuk ketika mouse diarahkan ke marker (mouse over)  
71:          google.maps.event.addListener(marker, "mouseover", function () {  
72:              
73:            infowindow.setContent(this.html);  
74:            infowindow.open(map, this);  
75:          });  
76:        }  
77:      }  
78:    
79:      //-----------------------------------Tambahan1 dari tutorial 2 -----------------------------------------------  
80:    
81:        function setAction(map){  
82:            
83:          google.maps.event.addListener(map, "rightclick", function(event) {  
84:    
85:          if(confirm("Tandai Titik Ini? (klik pada tanda yang muncul untuk melihat pilihan)")){  
86:            var lat = event.latLng.lat();  
87:            var lng = event.latLng.lng();  
88:              
89:            var siteLatLng = new google.maps.LatLng(lat, lng);  
90:            var marker = new google.maps.Marker({  
91:                position: siteLatLng,  
92:                map: map,  
93:                title: "add data",  
94:                zIndex: 100,  
95:                html: "ddd"  
96:    
97:              });  
98:             google.maps.event.addListener(marker, "mouseover", function () {  
99:                  
100:                infowindow.setContent(this.html);  
101:                infowindow.open(map, this);  
102:              });  
103:    
104:          }  
105:            
106:        });  
107:        }  
108:    
109:      //-----------------------------------akhir tambahan1 dari tutorial 2--------------------------------------------  
110:    
111:    
112:  </script>  
113:  </html>  

Baiklah, demikian tutorial kita kali ini tentang bagaimana menambahkan fungsi klik kanan untuk menambahkan marker Pada google map api v3.

Jika ada yang ingin mendownload source code nya silahkan ambil disini
Dan apabila anda merasa tutorial ini bermanfaat anda bisa membantu orang lain menemukan artikel ini dengan meng-klik icon sosial media dibawah untuk membagikannya.

Read More

Dasar Pemrograman web GIS dengan Google Map API v3

Hai sahabat programmer, kali ini programmer goblog bakalan mengulas dan memberikan tutorial tentang web GIS atau SIG memanfaatkan google map sebagai peta.
Apa sih SIG atau GIS?
Sistem Informasi Geografis atau dalam bahasa inggris Geographic Information System merupakan sebuah aplikasi yang mampu mengolah, menyimpan dan menyajikan data yang memiliki informasi spasial atau berbasis keruangan. misal data yang berupa lokasi bangunan, luas lahan, rute, dll.

Lantas apa sih gunanya GIS?

Read More