Press "Enter" to skip to content

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 Comments

  1. diani opiari diani opiari Februari 23, 2014

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

    • El Cicko El Cicko Post author | Februari 25, 2014

      udah disediain koq sama Google 🙂

      • agus krisna agus krisna Agustus 14, 2014

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

        thx

        • El Cicko El Cicko Post author | Agustus 14, 2014

          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…

  2. tri wiyono tri wiyono Februari 27, 2014

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

  3. El Cicko El Cicko Post author | Februari 27, 2014

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

  4. Poppy Poppy April 15, 2016

    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 *