Menampilkan Traffic Jalan Raya Pada Peta Google Maps

Dipublikasikan oleh El Cicko pada

cropped blake connally IKUYGCFmfw4 unsplash
Menampilkan Traffic Jalan Raya Pada Peta Google Maps

Pada artikel kali ini saya akan membahas tutorial tentang bagaimana cara menampilkan traffic jalan raya pada peta Google Maps dengan menggunakan PHP, MySQL dan Javascript.

Pertama kita akan membuat table pada database MySQL dengan nama lokasi. Table ini digunakan untuk menyimpan lokasi tempat yang akan kita tampilkan pada peta. Struktur pada table lokasi adalah sebagai berikut :

CREATE TABLE `lokasi` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_lokasi` varchar(255) NOT NULL,
  `latittude` varchar(255) NOT NULL,
  `longitude` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Setelah kita membuat table lokasi, sekarang kita tinggal menambahkan beberapa lokasi kedalam table tersebut. Untuk contoh kasus kali ini saya akan menggunakan beberapa lokasi yang ada di Kota Bandung.

INSERT INTO `lokasi` 
(`id`, `nama_lokasi`, `latittude`, `longitude`) 
VALUES
(1, 'Dago', '-6.878454','107.612616'),
(2, 'Jl. Setiabudi', '-6.862008', '107.596136'),
(3, 'Gerbang Tol Pasteur', '-6.890469', '107.55262'),
(4, 'Jl. Surapati', '-6.899416', '107.627152'),
(5, 'Jl. Asia Afrika', '-6.921485', '107.610995'),
(6, 'Cihampelas', '-6.89522', '107.604'),
(7, 'Gerbang Tol Pasteur', '-6.928301', '107.579406'),
(8, 'Jl. Surya Sumantri', '-6.886187', '107.581374');

Setelah selesai membuat table dan menginput beberapa data lokasi sekarang kita buat script PHP untuk menyambungkan koneksi antara halaman web dengan database.

Pertama kita buat terlebih dahulu script config.php

<?php

	$user	  = 'root';
	$pass	  = '';
	$host	  = 'localhost';
	$database = 'traffic';

	$sql = mysql_connect($host, $user, $pass);
	mysql_select_db($database, $sql);
	
	if (!$sql) {
		die('Could not connect : ' . mysql_errno() . mysql_error());
	}
?>

Kamu bisa menyesuaikan script diatas dengan konfigurasi database yang ada di sistem yang kamu miliki.

Setelah membuat file config.php sekarang kita akan membuat halaman utama yang digunakan untuk menampilkan lalu lintas jalan raya pada peta Google Maps.

<?php require ('config.php'); ?>
<html>
<head>
	<title></title>
	<link href="assets/css/bootstrap.css" rel="stylesheet">
	<style>
		body {
			padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
		}
		
		#map_canvas img {
			max-width: none;
		}

		#map_canvas label {
			width: auto; display:inline;
		}
	</style>
	<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap-alert.js"></script>

	<!-- load googlemaps api dulu -->
	<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

	<script type="text/javascript">
		var peta;

		function peta_awal(){
		// posisi default peta saat diload
		var lokasibaru = new google.maps.LatLng(-6.914498,107.609869);
		var petaoption = {
			zoom: 13,
			center: lokasibaru,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
	}

	function setLokasi(lokasi){
		// mengambil koordinat dari database
		var koordinat = lokasi.split('|');
		var x = koordinat[0];
		var y = koordinat[1];
		var id = koordinat[2];
		
		var lokasibaru = new google.maps.LatLng(x, y);
		var petaoption = {
			zoom: 16,
			center: lokasibaru,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
		var trafficLayer = new google.maps.TrafficLayer();
		trafficLayer.setMap(peta);
	}
</script> 
</head>
<body onload="peta_awal()">
	<div class="container">
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
					<a class="brand" href="#">GOOGLE MAPS TRAFFIC</a>
					<div class="btn-group pull-right">

					</div><!--/.nav-collapse -->
				</div>
			</div>
		</div>
		<div class="row">
			<div class="span8">
				<div class="control-group">
					<div id="map_canvas" style="width:100%; height:500px"></div>
				</div>
			</div>
			<div class="span4">
				<div class="control-group">
					<label class="control-label" for="input01">LOKASI</label>
					<div class="controls">
						<select name="lokasi" id="lokasi" onchange="setLokasi(this.options[this.selectedIndex].value)" style="width:280px;" tabindex="2">
							<?php
							/* menampilkan data lokasi */
							$lokasi = mysql_query("SELECT * FROM `lokasi`");
							if (mysql_num_rows($lokasi) > 0)  {
								echo '<option value="">Pilih lokasi...</option>';
								while($l = mysql_fetch_array($lokasi)) {
									echo '<option value="'.$l['latittude']."|".$l['longitude']."|".$l['id'].'">'.$l['nama_lokasi'].'</option>';
								}
							} else {
								echo '<option value="">tidak ada data lokasi</option>';
							}

							echo $o;

							?>
						</select>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label" for="input01">* keterangan</label>
					<div class="controls">
						<font style="color:black;">HITAM = MACET</font>
						<br>
						<font style="color:red;">MERAH = PADAT MERAYAP</font>
						<br>
						<font style="color:#ffde00;">KUNING = PADAT LANCAR</font>
						<br>
						<font style="color:green;">HIJAU = LANCAR</font>
					</div>
				</div>
			</div>	
		</div>
		<hr>
		<footer>
			<p>© GoogleMaps Traffic 2013</p>
		</footer>
	</div>
</body>
</html>

Jalankan script yang sudah kita tulis di Browser, output yang akan muncul adalah sebagai berikut

Menampilkan Traffic Jalan Raya di Google Maps - Demo

Data lalu lintas yang muncul berasal dari perangkat smartphone Android yang digunakan oleh pengguna jalan sehingga Google dapat melakukan perhitungan data.

Statistik yang ada berdasarkan pada jumlah pengguna tertentu sehingga kondisi lalu lintas pada peta itu sendiri dapat dibedakan dengan warna.

cukup mudah khan? sekian dulu tutorial dari saya tentang cara menampilkan traffic jalan raya pada Google Maps. Selamat mencoba dan semoga bermanfaat 🙂

download button

El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

7 Komentar

diani opiari · Februari 23, 2014 pada 4:05 pm

mas, mau nanya.. untuk warna merah, kuning, hijau itu kita yang bikin atau di sediain ama google nya???

    El Cicko · Februari 25, 2014 pada 5:06 pm

    udah disediain koq sama Google 🙂

      agus krisna · Agustus 14, 2014 pada 7:40 pm

      mas sdh saya coba pake koordinat yg lain kok tidak otomatis ada warnanya mas, mohon pencerahanya

      thx

        El Cicko · Agustus 14, 2014 pada 8:11 pm

        cuma ganti koordinatnya aja ya mas?
        perlu diperhatikan kalo traffic layer ini hanya berfungsi untuk di kota-kota padat lalu lintas kaya jakarta & bandung dan sekitarnya. Untuk kota-kota yang lain saya belum pernah coba mas…

tri wiyono · Februari 27, 2014 pada 4:49 pm

mas klo buat marker per kategori gimana yah, tapi nanti viewnya berdasarkan kategori yang kita pilih plus image markernya beda2

El Cicko · Februari 27, 2014 pada 4:56 pm

perasaan pernah bikin…cuman kayaknya belum di posting..nanti dech ya ane celup jadi artikel 😀

Poppy · April 15, 2016 pada 3:12 am

Mas, kalo sinkronisasi data, antara data macet dan data lokasi rumah, gimana ya mas?
thanks

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *