Menampilkan Markers Google Maps API

dengan PHP dan MySQL

Oleh: Hasyemi Rafsanjani Asyari

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

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

Tentang Penulis

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.