Pencarian Koordinat Di Google Maps Dengan Combobox

Sesuai dengan judul, kali ini saya akan membahas tutorial untuk melakukan pencarian koordinat di Google Maps dengan combobox. Fungsinya agar pengguna tidak perlu melakukan input manual nama lokasi atau koordinat tertentu di Google Maps untuk melihat lokasi tertentu di peta.

Sebagai contoh misalnya begini, saya mempunyai warteg yang cabangnya tersebar di provinsi Jawa Barat. Ketika saya ingin melihat cabang mana saja yang ada di kota Purwakarta atau Bandung, tentu saya memerlukan combobox untuk memilih kota tersebut agar saya tidak perlu mengetik secara manual nama kota tersebut.

Setelah kota dipilih maka pencarian akan diproses dengan mengunakan PHP & MySQL dan marker koordinat dari cabang tersebut akan ditampilkan ke dalam peta.

Dengan apa? tentunya dengan teknologi AJAX agar proses pencarian dapat dilakukan secara real time tanpa perlu melakukan refresh pada halaman HTML.

Pencarian Koordinat Di Google Maps

1. Database

Pertama kita akan membuat database pada MySQL. Kita membutuhkan dua table yaitu kota dan cabang.

fungsi table kota adalah untuk menampung data kota / kabupaten yang ada di Jawa Barat. Struktur table yang kita gunakan adalah sebagai berikut

CREATE TABLE `kabkota` (
  `idkabkota` int(11) NOT NULL AUTO_INCREMENT,
  `nama_kabkota` varchar(45) NOT NULL,
  `lat` varchar(45) DEFAULT NULL,
  `long` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`idkabkota`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Kita memerlukan data kota / kabupaten yang nantinya akan kita simpan didalam table tersebut. Kebetulan saya sudah mempunyai data kota tersebut jadi kita tinggal jalankan query dibawah ini.

INSERT INTO `kabkota` (`idkabkota`, `nama_kabkota`, `lat`, `long`) VALUES
(1,	'Kab. Bogor',	'-6.562491667',	'106.8191167'),
(2,	'Kab. Sukabumi',	'-6.8388',	'106.9593'),
(3,	'Kab. Cianjur',	'-6.811812',	'107.1454123'),
(4,	'Kab. Bandung',	'-6.982118274',	'107.5192585'),
(5,	'Kab. Garut',	'-7.2483974',	'107.9096516'),
(6,	'Kab. Tasikmalaya',	'-7.573861111',	'108.1512028'),
(7,	'Kab. Ciamis',	'-7.43165',	'108.4922056'),
(8,	'Kab. Kuningan',	'-7.012783333',	'108.5575083'),
(9,	'Kab. Cirebon',	'-6.709316',	'108.476571'),
(10,	'Kab. Majalengka',	'-6.8340124',	'108.2276311'),
(11,	'Kab. Sumedang',	'-6.81545',	'107.9551583'),
(12,	'Kab. Indramayu',	'-6.3926946',	'108.2875448'),
(13,	'Kab. Subang',	'-6.5712842',	'107.7596912'),
(14,	'Kab. Purwakarta',	'-6.5614',	'107.4438'),
(15,	'Kab. Karawang',	'-6.343258333',	'107.2913361'),
(16,	'Kab. Bekasi',	'-6.242402',	'107.113788'),
(17,	'Kab. Bandung Barat',	'-6.8218192',	'107.6302219'),
(18,	'Kota Bogor',	'-6.589166',	'106.792999'),
(19,	'Kota Sukabumi',	'-6.9196',	'106.9272'),
(20,	'Kota Bandung',	'-6.9147444',	'107.6098111'),
(21,	'Kota Cirebon',	'-6.7166667',	'108.5666667'),
(22,	'Kota Bekasi',	'-6.2333333',	'107'),
(23,	'Kota Depok',	'-6.39',	'106.83'),
(24,	'Kota Cimahi',	'-6.8879326',	'107.5552421'),
(25,	'Kota Tasikmalaya',	'-7.3333333',	'108.2'),
(26,	'Kota Banjar',	'-7.366741',	'108.544896'),
(28,	'Pangandarang',	'-7.674783021804229',	'108.64757142535404');

Setelah selesai dengan table kota, sekarang kita membutuhkan table cabang yang digunakan untuk menyimpan data cabang sesuai dengan yang ada di dalam kota yang sudah kita input sebelumnya.

CREATE TABLE `cabang` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_cabang` varchar(150) NOT NULL,
  `kabkota` int(11) NOT NULL,
  `lat` varchar(255) NOT NULL,
  `long` varchar(255) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `kabkota` (`kabkota`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Jalankan query dibawah ini untuk menyimpan data-data cabang yang kita butuhkan.

INSERT INTO `cabang` (`id`, `nama_cabang`, `kabkota`, `lat`, `long`) VALUES
(5,	'Cabang Bandung Sukarno Hatta',	4,	'-6.948209763605053',	'107.60371589746092'),
(4,	'Cabang Bogor Cilebut',	1,	'-6.55072450153551',	'106.79886065751953'),
(6,	'Cabang Garut Cireungit',	5,	'-7.238009618261152',	'107.87171443569332'),
(7,	'Cabang Purwakarta Veteran',	14,	'-6.53036130231053',	'107.4463749206543'),
(8,	'Cabang Purwakarta Ipik Gandamanah',	14,	'-6.520298893320354',	'107.46182444458009'),
(9,	'Cabang Purwakarta Ahmad Yani',	14,	'-6.550485513115983',	'107.4376201904297'),
(10,	'Cabang Bandung Lembang',	4,	'-6.811358234473121',	'107.6169338234863'),
(11,	'Cabang Bandung Soreang',	4,	'-7.026587517898394',	'107.51668357934568'),
(12,	'Cabang Cianjur Barus',	3,	'-6.782664228504837',	'107.1691015700195'),
(13,	'Cabang Cianjur Ciherang',	3,	'-6.796471287942675',	'107.2097853163574'),
(14,	'Cabang Sukabumi Pabuaran',	2,	'-6.936281699525283',	'106.89029212646483'),
(15,	'Cabang Purwakarta Ciganea',	14,	'-6.565833942009622',	'107.43315699462892');

Jika sudah selesai dengan struktur database sekarang kita akan membuat script PHP untuk memproses data tersebut.

2. Script PHP

Pertama, kita buat script PHP untuk koneksi ke database MySQL terlebih dahulu

<?php

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

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

Lalu kita tinggal membuat sebuah script untuk menampilkan sebuah output berupa JSON yang nantinya akan dieksekusi oleh halaman utama dengan menggunakan AJAX.

<?php

require ('config.php');

// jika ada parameter yang dilempar dari script index.php
// maka lakukan pencarian
if (isset($_GET['kab'])) {
	$id = $_GET['kab'];
	$sql = "SELECT * from `cabang` WHERE `kabkota` = '".$id."'";
} else {
	// kalo tidak, tampilkan semua lokasi
	$sql = "SELECT * from `cabang`";
}

$data = mysql_query($sql);
$json = '{"warteg": {';
$json .= '"cabang":[ ';
while($x = mysql_fetch_array($data)){
	$json .= '{';
	$json .= '"idcabang":"'.$x['id'].'",
		"nama_cabang":"'.htmlspecialchars($x['nama_cabang']).'",
		"x":"'.$x['lat'].'",
		"y":"'.$x['long'].'"
	},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}}';

echo $json;

?>

3. Script HTML

Setelah selesai membuat script PHP sekarang kita tinggal membuat script utama untuk halaman yang digunakan untuk menampilkan peta.

<html>
	<head>
		<title>Warteg</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 type="text/javascript" src="assets/js/markerclusterer_packed.js"></script>
		<script src="assets/js/jquery.js"></script>
		<!-- load googlemaps api dulu -->
		<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			var peta;
			var peta2;
			var gambar_tanda;
			gambar_tanda = 'assets/img/marker.png';
			var x = new Array();
			var y = new Array();

			function peta_awal() {
				// posisi default peta saat diload
				var lokasibaru = new google.maps.LatLng(-7.090911, 107.668887);
				var petaoption = {
					zoom: 8,
					center: lokasibaru,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				peta = new google.maps.Map(document.getElementById("map_canvas"), petaoption);
				// memanggil function ambilpeta() untuk menampilkan koordinat
				ambilpeta();
			}

			function ambilpeta() {
				url = "json.php";
				$.ajax({
					url: url,
					dataType: 'json',
					cache: false,
					success: function (msg) {
						var markers = [];
						for (i = 0; i < msg.warteg.cabang.length; i++) {
							x[i] = msg.warteg.cabang[i].x;
							y[i] = msg.warteg.cabang[i].y;
							var point = new google.maps.LatLng(parseFloat(msg.warteg.cabang[i].x), parseFloat(msg.warteg.cabang[i]
								.y));
							tanda = new google.maps.Marker({
								position: point,
								map: peta,
								icon: gambar_tanda,
								clickable: true
							});
							markers.push(tanda);
						}
						var markerCluster = new MarkerClusterer(peta, markers);
					}
				});
			}

			// ketika button caripeta ditekan, maka script ini akan berjalan
			$(document).ready(function () {
				$("#caripeta").click(function () {
					var kab = $("#kab").val();
					$.ajax({
						url: "json.php",
						data: "kab=" + kab,
						dataType: 'json',
						cache: false,
						success: function (msg) {
							var awal2 = new google.maps.LatLng(-7.090911, 107.668887);
							var petaoption2 = {
								zoom: 8,
								center: awal2,
								mapTypeId: google.maps.MapTypeId.ROADMAP
							};
							var peta2 = new google.maps.Map(document.getElementById("map_canvas"), petaoption2);
							google.maps.event.addListener(peta2, 'click', function (event) {
								kasihtanda(event.latLng);
							});

							var markers = [];
							for (i = 0; i < msg.warteg.cabang.length; i++) {
								x[i] = msg.warteg.cabang[i].x;
								y[i] = msg.warteg.cabang[i].y;
								var point2 = new google.maps.LatLng(parseFloat(msg.warteg.cabang[i].x), parseFloat(msg.warteg
									.cabang[i].y));
								tanda = new google.maps.Marker({
									position: point2,
									map: peta2,
									icon: gambar_tanda,
									clickable: true
								});
								markers.push(tanda);
							}
							var markerCluster = new MarkerClusterer(peta2, markers);
						}
					});
				});
			});
		</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">
						</a>
						<a class="brand" href="#">WARTEG CICKO</a>
						<div class="btn-group pull-right"></div>
					</div>
				</div>
			</div>
			<form id="formpeta" class="form-inline">
				<select name="kabkota" id="kab">
					<option value="">- Pilih Kabupaten -</option>
					<?php
						require ('config.php');
						$sql = mysql_query("SELECT * FROM `kabkota`");
						while ($kab = mysql_fetch_array($sql)) {
							echo '<option value="'.$kab['idkabkota'].'">'.$kab['nama_kabkota'].'</option>';
						}
					?>
				</select>
				<input type="button" id="caripeta" class="btn" value="tampilkan">
			</form>
			<div id="map_canvas" style="height:500px"></div>
			<hr>
			<footer>
				<p>© Warteg Cicko 2013</p>
			</footer>
		</div>
	</body>
</html>

4. Demo

Jika sudah selesai maka jalankan script tersebut di browser, output yang muncul seharusnya seperti ini :

Kamu dapat mendownload source code untuk pencarian koordinat di Google Maps disini.

Script yang digunakan adalah versi PHP lama dan Google Maps API yang digunakan belum mengikuti kebijakan baru dari Google Maps. Silahkan baca artikel saya tentang kebijakan baru dari Google Maps.

Selamat mencoba dan Semoga bermanfaat 😀