Peta Dinamis dgn Google Maps API, MySql dan PHP

Solusi kali ini kita akan membahas bagaimana cara menampilkan data lokasi yang berada di database MySql ke Google Map menggunakan PHP.

Dalam hal ini kita berasumsi memiliki database yang menyimpan kordinat wilayah tertentu dan beberapa informasi yang kita berikan untuk kordinat tersebut.

Contoh kali ini kita akan menampilkan nama dan foto pada kordinat lokasi yang kita tetapkan di database. Langsung aja ke langkah – langkahnya…

1. Pertama kita buat database, tabel serta isi data yang akan kita tampilkan, sesuai contoh diatas kita membuat database “dbmap” tabel “tblokasi” dan memebri dua data.

      1: CREATE DATABASE dbmap;

   
   

      2:  

   
   

      3: USE dbmap;

   
   

      4:  

   
   

      5: CREATE TABLE IF NOT EXISTS `tblokasi` (

   
   

      6:   `id` int(11) NOT NULL AUTO_INCREMENT,

   
   

      7:   `lat` varchar(20) NOT NULL,

   
   

      8:   `lon` varchar(20) NOT NULL,

   
   

      9:   `nama` char(25) NOT NULL,

   
   

     10:   `gambar` varchar(50) NOT NULL,

   
   

     11:   PRIMARY KEY (`id`)

   
   

     12: ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

   
   

     13:  

   
   

     14: INSERT INTO `tblokasi` (`id`, `lat`, `lon`, `nama`, `gambar`) VALUES

   
   

     15: (1, '-6.875364', '107.577604', 'Ibnu Imam', 'FantasiaIben.jpg'),

   
   

     16: (2, '-6.890704', '107.610108', 'Institut Teknologi Bandun', 'picitb.jpg');

2. Kemudian kita buat file peta.php di dalam web server, file ini yang nantinya akan menampikan peta berdasarkan data yang ada di database.
   
   
   
   

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

   
   

      2: <script type="text/javascript">

   
   

      3: (function() {

   
   

      4:     window.onload = function() {

   
   

      5:     var map;

   
   

      6:     var locations = [

   
   

      7:     <?php        

   
   

      8:     $host="localhost";

   
   

      9:     $username="root";

   
   

     10:     $password="";

   
   

     11:     $database="dbmap";

   
   

     12:  

   
   

     13:     $connection=mysql_connect ($host, $username, $password);

   
   

     14:     $db_selected = mysql_select_db($database, $connection);

   
   

     15:  

   
   

     16:     $sql = "SELECT * FROM tblokasi";

   
   

     17:     $result = mysql_query($sql);

   
   

     18:     while($data = mysql_fetch_object($result)) {

   
   

     19:     ?>

   
   

     20:     [<?=$data->lat;?>, <?=$data->lon;?>, '<?=$data->nama;?>', '<?=$data->gambar;?>'],

   
   

     21:     <?php }    ?>        

   
   

     22:     ];

   
   

     23:  

   
   

     24:     //Parameter Google maps

   
   

     25:     var options = {

   
   

     26:       zoom: 20, //level zoom maps

   
   

     27:       center: new google.maps.LatLng(-6.905637,107.611427), //kordinat tengah maps

   
   

     28:       mapTypeId: google.maps.MapTypeId.ROADMAP

   
   

     29:     };

   
   

     30:     

   
   

     31:     // Buat maps pada id peta 

   
   

     32:     var map = new google.maps.Map(document.getElementById('peta'), options);

   
   

     33:     

   
   

     34:     // Tambahkan Marker 

   
   

     35:     var infowindow = new google.maps.InfoWindow();

   
   

     36:  

   
   

     37:     var marker, i;

   
   

     38:     /* kode untuk menampilkan banyak marker */

   
   

     39:     for (i = 0; i < locations.length; i++) {  

   
   

     40:       marker = new google.maps.Marker({

   
   

     41:         position: new google.maps.LatLng(locations[i][0], locations[i][1]),

   
   

     42:         map: map,

   
   

     43:         icon: 'icon.png'

   
   

     44:       });

   
   

     45:       

   
   

     46:     /* menambahkan event clik untuk menampikan infowindows dengan isi sesuai dgn marker yang di klik */        

   
   

     47:       google.maps.event.addListener(marker, 'click', (function(marker, i) {

   
   

     48:         return function() {

   
   

     49:           infowindow.setContent('<img src="' + locations[i][3] + '" width="80" /><br/><b>' + locations[i][2] + '</b>');

   
   

     50:           infowindow.open(map, marker);

   
   

     51:         }

   
   

     52:       })(marker, i));

   
   

     53:     }

   
   

     54:   };

   
   

     55: })();

   
   

     56: </script>

   
   

     57:  

   
   

     58: <!-- Style untuk Peta -->

   
   

     59: <style>

   
   

     60: #peta {

   
   

     61:      border:1px solid #000;

   
   

     62:      width:700px;

   
   

     63:      height:500px;

   
   

     64: }

   
   

     65: </style>

   
   

     66:  

   
   

     67: <div align="center">  

   
   

     68:     <div id="peta"></div>

   
   

     69: </div>

3. Perhatikan beberapa script pada file peta.php, seperti password database.
4. Jika semua sudah dirasa cocok silahkan buka peta.php melalui browser dan lihat hasilnya.

Perhatian pastikan kamu telah memiliki gmabar degan nama yang sama pada database dan diletakkan pada posisi yang sama dengan file peta.php (gambar ini yang akan dimunculkan pada info)
pastikan kamu juga memiliki gambar icon.png yang diletakkan pada posisi yang sama dengan file peta.php (icon ini untuk marker kordinat).

Dari penjelasan sederhana ini sebenarnya kita sudah bisa memodifikasi untuk keperluan yang lain.

Terima Kasih, Tunggu solusi-solusi menarik lainya dari Midhigh Solution.
Ref : http://blog.midhighsolution.com/2013/02/peta-dinamis-dgn-google-maps-api-mysql.html

Posted in: PHP