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.
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
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.
