Tutorial Google Maps + PHP

Tutorial Google maps sebelumnya hanya sebatas menampilkan data statis. Data harus diletakan di javascript langsung. Namu biasanya data lokasi GIS berada di database. Tutorial ini akan mengajarkan bagaimana cara menampilkan data lokasi yang tersimpan di MySQL ke Google maps menggunakan PHP.

Berikut ini tutorialnya.
sekenario
aplikai ini adalah menampilkan object wisata di jogjakarta dimana data lokasi tersimpan didalam database candralabdb dan nama tabel lokasi. Untuk marker kita menggunakan ikon sendiri dengan nama icon.png dan jika marker di klik maka akan menampilkan infowindows berupa lokasi wisata.

Google maps menampilkan data lokasi dari tabel mySQL

Langkah langkah 
1. Buat database candralabdb;
2. Import script sql dibawah ini

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

CREATE TABLE IF NOT EXISTS `lokasi` (   `idlokasi` int(11) NOT NULL AUTO_INCREMENT,   `nama` varchar(100) DEFAULT NULL,   `lat` double DEFAULT NULL,   `lon` double DEFAULT NULL,   PRIMARY KEY (`idlokasi`) ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;   -- -- Dumping data untuk tabel `lokasi` --   INSERT INTO `lokasi` (`idlokasi`, `nama`, `lat`, `lon`) VALUES (1, 'Kraton Yogyakarta', -7.804498466205372, 110.36422538623049), (3, 'Taman Sari', -7.805859, 110.355986), (5, 'Museum Benteng Yogyakarta', -7.798971, 110.367101), (6, 'Museum Afandi', -7.781539, 110.396112), (7, 'Candi Prambanan', -7.754707832876155, 110.49170780517579);

2. Buat script lokasi.php
lokasi.php berisi kombinasi script PHP dan javascript untuk mengambil data dari database

?

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

(function() {   window.onload = function() { var map;     var locations = [    <?php          //konfgurasi koneksi database           mysql_connect('localhost','root','');         mysql_select_db('candralabdb');                       $sql_lokasi="select idlokasi,nama,lat,lon               from lokasi  ";               $result=mysql_query($sql_lokasi);         // ambil nama,lat dan lon dari table lokasi               while($data=mysql_fetch_object($result)){                  ?>              ['<?=$data->nama;?>', <?=$data->lat;?>, <?=$data->lon;?>],        <?         }     ?>              ];       //Parameter Google maps     var options = {       zoom: 12, //level zoom     //posisi tengah peta       center: new google.maps.LatLng(-7.8008, 110.380643),       mapTypeId: google.maps.MapTypeId.ROADMAP     };        // Buat peta di     var map = new google.maps.Map(document.getElementById('peta'), options);    // Tambahkan Marker         var infowindow = new google.maps.InfoWindow();       var marker, i;      /* kode untuk menampilkan banyak marker */     for (i = 0; i < locations.length; i++) {        marker = new google.maps.Marker({         position: new google.maps.LatLng(locations[i][1], locations[i][2]),         map: map,      icon: 'icon.png'       });      /* menambahkan event clik untuk menampikan         infowindows dengan isi sesuai denga       marker yang di klik */             google.maps.event.addListener(marker, 'click', (function(marker, i) {         return function() {           infowindow.setContent(locations[i][0]);           infowindow.open(map, marker);         }       })(marker, i));     }         }; })();