Pencarian Koordinat Di Google Maps Dengan Combobox

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 :

Pencarian Koordinat Di Google Maps Dengan Combobox - Demo

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 😀

29 pemikiran pada “Pencarian Koordinat Di Google Maps Dengan Combobox”

  1. salam kenal dari palembang gan, perkenalkan nama saya rais dari palembang.

    terima kasih atas ilmu nya gan sangat bermanfaat…ini yang saya cari…

    ada pertanyaan gan, penerapan geocoder dalam php dan mysql nya bagaimana.

    pencarian data nya dari database seperti warteg gan….maka tampil data yang dicari

    saya sedang mempelajari gis warteg punya agan terima kasih banyak gan, mohon dijawab gan ya

    • wah..jauh2 dari palembang nich…hehehe 😀
      maksudnya pencariannya pake geocoder ya? bisa digabung dengan geocoding disini…tinggal dimodifikasi sedikit koq, kalo yang di combobox khan pencariannya pake id…nah untuk geocoding pencariannya bisa berdasarkan nama daerah itu sendiri, untuk menampilkan koordinatnya dilakukan oleh script geocoding, sedangkan untuk menampilkan multimarker dari cabangnya baru pake json…mudah-mudahan sedikit bisa membantu 🙂

  2. salam agan elcicko mau nanya gan tentang skripsi ane pake google map lat sama long.. oya klo mau cara nampilkan lat long yg udah kesimpen dari database misalkan ane punya database nama A , B , C, D , E, F ane mau nampilin lat long gmn yah cara nya gan pake 2 combo box misal ane mau nyari asal A tujuan F.. yg tampil A, C, D, F? mungkin agan bisa bantu thanks

  3. gan elcicko salam kenal, thanks buat share ilmunya..

    oya gan mau nanya klo gambar iconnya(marker.png) berbeda – beda bisa ga ga hanya satu?? thanks

  4. cara nya gimana mas? soal nya yang tutorial yang pencarian ini, saya gabung dengan yang infowindow, info window nya enggak mau muncul

  5. iya mas, makasih. ditunggu..
    saya binngung masukin content di infowindow nya

    google.maps.event.addListener(tanda, ‘click’, (function(tanda, i) {
    return function() {
    infowindow.setContent(???????);
    infowindow.open(peta, tanda);

    kira” yang tanda ???? itu isi nya gimana ya mas?

    • perasaan ga usah pake setContent deh mas.. gini aja misalnya

      var isistring = "nah ini tinggal diambil dari data geocoding";
      var infowindow = new google.maps.InfoWindow({content: isistring});

      google.maps.event.addListener(tanda, 'click', function() {
      infowindow.open(peta,tanda);
      });

      saya mungkin aja salah…saya ulik dulu ya mas… 🙂

  6. Gan saya mau tanya. Kalau misalkan dalam 1 form ada 2 button bagaimana cara nya? Jadi misalkan di pencarian menggunakan combobox ada 2 button, yang 1 untuk button menampilkan marker pada peta berdasarkan pencarian, button ke 2 untuk melakukan pencarian dalam bentuk tabel ke halaman lain?

  7. salam gan,,
    mau nanya gimana sih script buat pencarian berdasarkan combobox di google map,,
    tapi lebih sederhana ya mas,soalnya yg mas buat di atas saya kurang ngerti..
    gambarannya sperti ini:
    -pencarian lokasi bank mandiri
    -combobox=kecamatan
    -peta=kota medan
    tolong ya mas,kirimin ke email saya,,
    thanks..

    • halo mas wan,
      ini udah yang paling sederhana koq. ga ribet sebenernya….
      untuk membuat koordinatnya mas wan musti punya data kecamatannya dulu, nanti bisa dicari koordinatnya lewat https://maps.google.com.
      kodingnya bisa disamain sama contoh diatas ini. sama persis koq. tinggal penyesuaian data aja.
      silahkan download dulu kodenya trus coba dijalanin dulu mas. 😀

      • gak bisa juga mas,,petanya tampil tapi marker lokasi yang dicari gak tampil,,
        gimana tuh ya mas..
        saya punya 2 tabel dalam 1 database,
        tabel pertama berisi data kecamatan, tabel kedua berisi lokasi yang uda diinput koordinatnya,,
        nah skrg saya mau menampilkan marker (tabel lokasi ) tadi tapi berdasarkan pencarian combobox (tabel data kecamatan)..
        itu gimana kira2 codingnya ya mas?
        mohon bantuannya please…

    • saya lup filenya yang mana, sekarang ini memang lagi migrasi dari Box ke Dropbox karena Server Box sering down jadi script websitenya sering ga ke load. nanti linknya saya update

Tinggalkan komentar