Menampilkan Traffic Jalan Raya Pada Peta Google Maps

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

7 pemikiran pada “Menampilkan Traffic Jalan Raya Pada Peta Google Maps”

Tinggalkan komentar