[PHP + MySQL] Menampilkan Data Polyline Google Maps API

Pada artikel sebelumnya [PHP + MySQL]membuat peta lokasi dengan google maps api, kita sudah belajar bagaimana cara membuat peta dan menampilkan marker di google maps API dari database.Sekarang kita akan belajar bagaimana cara menampilkan data Polyline google maps dari database MySQL, tentu kita tetap menggunakan PHP sebagai bahasa pemrograman dari sisi server-sidenya.

Persiapan Data

Buat tabel dengan nama "data_polyline" seperti berikut. Ditabel ini kita buat 3 kolom atau field yaitu id_polyline, lat_long dan keterangan. Pada field lat_long inilah kita menyimpan data polyline dengan format data JSON.

Struktur tabel data_polyline

Data tabel data_polyline

Jika anda ingin menggunakan sample data (berserta script table) yang saya gunakan,dapat didownload di Google Drive saya. Pada data sample ini, kita akan membuat semacam "rute" dari BSI Margonda depok ke Stasiun Pondok Cina Depok, kemudian ini yang paling greget maksimal yaitu rute jalan satu arah dari persimpangan Arief Rahman Hakim ke Margonda yang membuat saya memutar cukup jauh dan kena macet saat pulang kerja (curhat).

Pada field lat_long, salah satu value bernilai :

{"polyline":[[-6.35678,106.83320],[-6.35795,106.83258],[-6.36484,106.83384],[-6.36834,106.83412],[-6.37013,106.83369],[-6.36985,106.83234],[-6.36919,106.83236]]}

latlong-latlong pada tersebut yang akan digambarkan pada maps berupa titik koordinat atau point (atau setahu saya istilahnya di polyline itu vertex) yang akan saling terhubung dengan titik lainnya. Jika pada routes kita mengenal istilah waypoints, maka di polyline ini kita mengenalnya sebagai vertex.

Jadi jika [-6.37013,106.83369] dihapus, maka titik koordinat dari [-6.36834,106.83412] akan langsung terhubung ke [-6.36985,106.83234] dengan garis lurus. Berbeda jika pada routes, routes akan mengikuti jalan raya sesuai kondisinya (apakah menghindari tol dan sebagainya).

Buat File Koneksi

buat file bernama koneksi.php, ketik kode berikut:

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'map');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

catatan : jika anda sudah mengikuti artikel sebelumnya, maka gunakan kembali database "map" dan file koneksi.php yang sudah dibuat sebelumnya.

Buat File Map Polyline

buat lagi file php bernama map_polyline.php, karena script cukup panjang dan dikhawatirkan semakin menambah panjang artikel ini sehingga jadi malas dibaca :D , anda bisa mendownload nya di Google Drive saya.

catatan : pastikan file koneksi.php dan map_polyline.php berada dalam satu folder yang sama di c:\xampp\htdocs\, lokasi folder htdocs tergantung dimana anda saat menginstal xampp :)

Hasilnya

Penjelasan Kode

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA" async defer></script>

string API_KEY_ANDA diisi dengan API key yang anda punya.

var datanya = [
<?php
$sql = mysqli_query($db, "SELECT * FROM data_polyline");
while(($data = mysqli_fetch_assoc($sql))) {
?>
{
"lat_long": '<?php echo $data['lat_long']; ?>',
"keterangan": '<?php echo $data['keterangan']; ?>'
},
<?php
}
?>

membuat array di javascript bernama datanya, isi array (lat_long dan keterangan) diambil dari tabel data_polyline dengan looping menggunakan script PHP. Isi dari variabel datanya akan terlihat seperti berikut (klik gambar untuk memperbesar):

var mapOptions = {
center: new google.maps.LatLng(-6.385589,106.830711),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Posisi map secara default akan berada di kota Depok, Jawa Barat dengan level zoom 15.

for (i = 0; i < datanya.length; i++) {

var data = datanya[i];

var temp = data.lat_long;

var hasil = eval('(' + temp + ')');

lakukan looping sebanyak data pada array datanya, buat variabel temp yang akan menampung data field lat_long kemudian buat variabel hasil yang berisi hasil parse atau mengubah dari object ke string dengan fungsi eval() yang berasal dari value lat_long yang berupa JSON . Bisa anda ganti fungsi eval() dengan fungsi json.stringify() untuk lebih baiknya :) . 

var pathnya = [];

for(var j=0;j < hasil.polyline.length;j++){
pathnya[j] = {'lat':hasil.polyline[j][0],'lng':hasil.polyline[j][1]};
}

membuat array bernama pathnya yang akan diisi oleh data lat_long yang dilooping dari variabel hasil. Pada hasil.polyline, teks "polyline" berasal dari object isi field lat_long pada tabel data_polyline. Jika data anda misalnya :

{"yudha":[[-6.35678,106.83320],[-6.35795,106.83258]]}

maka yang anda coding adalah hasil.yudha.length.

pathnya[j] = {'lat':hasil.polyline[j][0],'lng':hasil.polyline[j][1]};

pada baris coding ini, variabel pathnya berisi format lat long yang bisa diterima oleh Google Maps API.

polylinenya = new google.maps.Polyline({
path: pathnya,
geodesic: true,
strokeOpacity: 1.0,
strokeWeight: 2
});
polylinenya.setMap(map);

Membuat polyline dengan data path yang berasal dari variabel pathnya kemudian menampilkannya di map.

Jika anda bertanya, untuk apa field keterangan pada tabel data_polyline dan bagaimana cara membuat data polyline secara manual (digambar dengan mode drawing) dan menyimpannya ke tabel sehingga dapat ditampilkan seperti pada artikel ini? tunggu artikel selanjutnya ya :).

Semoga Bermanfaat

rerefensi : https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.