Hai-hai teman-teman jagocoding. Kali ini sedikit lebih advance, tapi tetap masih pada topik tentang Google Maps! Kali ini masih menampilkan markers tapi kali ini data markers kita ambil dari database sendiri. Pada tutorial kali ini kita akan sedikit menggunakan PHP dan juga MySQL

Menampilkan Markers Google Maps API dengan PHP dan MySQL

Hai-hai teman-teman jagocoding. Kali ini sedikit lebih advance, tapi tetap masih pada topik tentang Google Maps! Kali ini masih menampilkan markers tapi kali ini data markers kita ambil dari database sendiri.

Pada tutorial kali ini kita akan sedikit menggunakan PHP dan juga MySQL, semoga teman-teman sudah kenal dengan mereka.

Preparation

Persiapannya untuk tutorial kali ini, berbeda dengan sebelumnya kita perlu text-editor saja, kali ini kita tambah, karena kita butuh server bohongan alias XAMPP Server, atau LAMPP jika kalian menggunakan linux, atau sejenisnya. yang jelas kita butuh Apache Server dan juga MySQL Server.

 

Membuat Tabel Lokasi

Ya, konsepnya sama seperti pada tutorial menampilkan multiple markers, dimana sebelumnya kita menggunakan array. Untuk kasus kali ini kita menggunakan tabel sql.

Pertama buat database, sebut saja db_test dan juga buat tabel, terserah mau pake console atau phpmyadmin (saya sarankan sih phpmyadmin, lebih mudah) :D

Kita buat tabel dengan nama tbl_lokasi dengan berisi 4 field yaitu id_lokasi, nama_lokasi, lat, dan lng.

Table tbl_lokasi

Yang perlu diperhatikan, lat dan lang harus dengan type float(10,6).

 

Isi Tabel Lokasi

Ya karena susah mikir apa data lokasi kali ini, dan lebih mudah dan lebih cepat kalau kita gunakan saja data di tutorial sebelumnya yaitu data gunung-gunung di jawa. hahaha

 

Isi Tabel tbl_lokasi 

Ini yang perlu sql codenya:

INSERT INTO `db_test`.`tbl_lokasi` (`id_lokasi`, `nama_lokasi`, `lat`, `lng`) VALUES (NULL, 'Taman Nasional Gunung Gede Pangrango', '-6.777797700000000000', '106.948689100000020000'), (NULL, 'Gunung Papandayan', '-7.319999999999999000', '107.730000000000020000'), (NULL, 'Gunung Cikuray', '-7.3225', '107.86000000000001'), (NULL, 'Gunung Bromo', '-7.942493600000000000', '112.953012199999990000'), (NULL, 'Gunung Semeru', '-8.1077172', '112.92240749999996'), (NULL, 'Gunung Merapi', '-7.540717500000000000', '110.445724100000000000'), (NULL, 'Gunung Merbabu', '-7.455000000000001000', '110.440000000000050000'), (NULL, 'Gunung Prau', '-7.1869444', '109.92277779999995');

 

Buat Koneksi ke Database

Pertama, seperti biasanya dalam file php, perlu ada cek untuk koneksi dan memilih database. Kalian bisa pilih ingin dalam satu file file lain. Saya prefer buat file lain. beri nama: dbconfig.php.Sesuaikan dengan host, password dan user kalian ya.

 

<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'db_test';
$koneksi	= mysql_connect($host,$user,$pass);
	
	if(!$koneksi){
		die("Cannot connect to database.");
	}
	
	mysql_select_db($db);

?>

 

Buat fungsi untuk menambahkan marker dan menampilkan info windows

		var infoWindow = new google.maps.InfoWindow;   			

 		function bindInfoWindow(marker, map, infoWindow, html) {
		      google.maps.event.addListener(marker, 'click', function() {
		        infoWindow.setContent(html);
		        infoWindow.open(map, marker);
		      });
		 }

		 function addMarker(lat, lng, info) {
		      	var pt = new google.maps.LatLng(lat, lng);
		      	var marker = new google.maps.Marker({
		            map: map,
		            position: pt
		        });		    
		        bindInfoWindow(marker, map, infoWindow, info);
		      }

Kita buat dua fungsi ini, yaitu yang pertama adalah untuk menampilkan info windows, dimana akan di bind atau di attach ke tiap markers. Fungsi kedua yaitu addMarker yaitu fungsi menambahkan markers, pada akhir fungsi addMarker, memanggil fungsi bindInfoWindow, sehingga tiap markers akan memiliki info window.

Menampilkan data markers ke maps.

	<?php
		$query = mysql_query("select * from tbl_lokasi");
		while ($data = mysql_fetch_array($query)) {
			$lat = $data['lat'];
			$lon = $data['lng'];
			$nama = $data['nama_lokasi'];
			echo ("addMarker($lat, $lon, '<b>$nama</b>');\n");						
		}
	?>

Di script ini kita melakukan select untuk menampilkan data pada database, kemudian melakukan looping sebanyak data, dan kemudian data tersebut dibuat array dan dimasukan kedalam markers dengan menggunakan fungsi addMarker.

Source Code Lengkap

<?php
  include "dbconfig.php";
?>

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 500px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
    var marker;
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }     
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var infoWindow = new google.maps.InfoWindow;      
        var bounds = new google.maps.LatLngBounds();


        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }

          function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                map: map,
                position: pt
            });       
            map.fitBounds(bounds);
            bindInfoWindow(marker, map, infoWindow, info);
          }

          <?php
            $query = mysql_query("select * from tbl_lokasi");
          while ($data = mysql_fetch_array($query)) {
            $lat = $data['lat'];
            $lon = $data['lng'];
            $nama = $data['nama_lokasi'];
            echo ("addMarker($lat, $lon, '<b>$nama</b>');\n");                        
          }
          ?>
        }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>



 

Hasil akhirnya akan hampir sama dengan tutorial sebelumnya, karena memang data dan tekniknya sebenarnya hampir sama. Disini cobalah kalian lebih mengeksplor lagi, seperti menambahkan field deskripsi sehingga bisa ditampilkan di InfoWindow juga. Atau teknik lainnya.

Perlu dicatat bahwa jika kalian mencari di google, mungkin ada cara berbeda seperti menggunakan json dan cara lainnya. Jadi gunakan yang kalian lebih suka dan mengerti. Feel free to ask me!

 

Sekian tutorial kali ini, terima kasih. semoga bermanfaat.

 

 


About Author

Hasyemi Rafsanjani Asyari

null. I'm proud to be Stalker. Currently Mahasiswa Politeknik Negeri Jakarta. Currently Microsoft Student Partners Indonesia Regional Jabodetabek. Founder of a Company.


Comment & Discussions

  • mas mau tanya, kalo menambahkan filter marker dengan checkbox gimana ya? mohon bimbingannya mas

  • Harun Pry
    tutorial sebelumnya yg mana ya mas

  • Samsul Arifin
    Mas, mau nanya, kalau misal iconnya dibedain gimana ya mas? jadi misalnya kalau id = 5, warna iconnya merah, kalau id = 6, warna iconnya kuning

    Terus pertanyaan kedua, bisa ngga nambahin info, misal nama lokasi dan di bawahnya saya kasih keterangan kecamatan missalnya


    Terimakasih

  • Diah AyuLestari
    mas mau nanya, kalau gmaps api untuk tracking kendaraan dengan marker di mapsnya bagaimana ya mas? mohon info dan ilmunya jika paham :)
    terimakasih sebelumnya

  • Please LOGIN before if you want to give the comment.