Mengambil Latitude-Longitude Google Maps dari Database

Lanjutan dari Artikel Google Maps jama baholo kala 😀 dari kemaren banyak yang tanya, mas gimana memasukkan latitude dan longitude ke database dan dipanggil pake php. sebenarnya ini sangat mudah jika temen-temen sudah mengerti dasar-dasar Javascript, karena google maps dasarnya adalah javascript, kita tinggal main-main dengan javascriptnya sendiri.

banyak jalan menuju Madura, yah seperti itu temen-temen. Banyak jalan pula bagaimana memanggil dan menyimpan posisi google maps dari database, antara lain :

1. XML
2. AJAX
3. Parsing File

sekarang kita coba yang paling mudah yaitu pakai AJAX. disini agar lebih mudah saya gunakan core dari JQuery untuk memproses dan menampilkan Google Maps. lek bahasa keren’e JQuery for Google Maps 😀

tapi apalah arti semua kemudahan jika kita tidak tau dasarnya..

sekarang yang perlu disiapin 😀

1. Frameword JQuery “latest versions – > atau sak nduwene awakmu”  http://jquery.com/
2. BMap Plugin Jquery buat Google Maps -> sedot nag -> http://www.blocsoft.com/bMap
3. Karena berhubungan dengan database : maka pake Server yah. disini pake Lokal aj 😀 http://localhost
4. Siapin Databasenya, disini saya pakai mysql, sql codenya :

   CREATE TABLE IF NOT EXISTS `gps` (
     `id_tagging` int(10) unsigned zerofill NOT NULL AUTO_INCREMENT,
     `latitude` varchar(100) NOT NULL,
     `longitude` varchar(100) NOT NULL,
     `title` varchar(45) NOT NULL,
     `content` varchar(100) NOT NULL,
     `icons` varchar(45) NOT NULL,
     PRIMARY KEY (`id_tagging`)
   ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 ROW_FORMAT=DYNAMIC AUTO_INCREMENT=25 ;
   
   --
   -- Dumping data untuk tabel `gps`
   --
   
   INSERT INTO `gps` (`id_tagging`, `latitude`, `longitude`, `title`, `content`, `icons`) VALUES
   (0000000001, '-6.977035468024797', '113.8894271850586', 'Percobaan ke 2', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '1.png'),
   (0000000002, '-6.9277901135865925', '113.807373046875', 'Wisata Alam SUmenep', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '2.png'),
   (0000000003, '-6.908704023900703', '113.95980834960938', 'xxx', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '3.png'),
   (0000000004, '-6.9141572710856245', '113.9556884765625', 'xxxx', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '4.png'),
   (0000000005, '-6.912793965187945', '113.96392822265625', 'sss', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '5.png'),
   (0000000006, '-7.087264887963057', '113.96530151367188', 'fff', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '6.png'),
   (0000000007, '-7.017756953860871', '113.94882202148438', 'sdsd', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '7.png'),
   (0000000008, '-6.960507326113321', '114.0985107421875', 'ddd', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '8.png'),
   (0000000009, '-6.901887376486808', '113.8677978515625', 'ddd', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '9.png'),
   (0000000010, '-6.961870493881151', '113.95980834960938', 'zdsd', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '10.png'),
   (0000000011, '-6.942785785094588', '113.99139404296875', 'sadasf', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '11.png'),
   (0000000012, '-6.977035468024797', '113.8894271850586', 'xxxxx', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '12.png'),
   (0000000013, '-6.9277901135865925', '113.807373046875', 'xxxx', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '13.png'),
   (0000000014, '-6.908704023900703', '113.95980834960938', 'xxx', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '14.png'),
   (0000000015, '-6.9141572710856245', '113.9556884765625', 'xxxx', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '15.png'),
   (0000000016, '-6.912793965187945', '113.96392822265625', 'sss', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '16.png'),
   (0000000017, '-7.087264887963057', '113.96530151367188', 'fff', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '17.png'),
   (0000000018, '-7.017756953860871', '113.94882202148438', 'sdsd', 'Kecamatan : Kalianget, Desa : Kalimo''ok', '18.png'),
   (0000000021, '-6.980954426458483', '114.17369842529297', 'Arung Jeram2', 'meloko', '1.png'),
   (0000000023, '-6.973457259935797', '113.83861541748047', 'RS SUmenep', 'sumenep', '12.png'),
   (0000000024, '-7.008471404849581', '113.8602876663208', 'cxxxx', 'xxxxx', '16.png');
   
   

5. Isi databse terserah u, seng penting Latitude longitudenya bener 😀
6. Buat file PHP taruh d local htdocs temen-temen, disini saya namain index_maps.php “buat nampilin petanya”
7. scriptnya kayak ginilah… “modifikasi terserah anda, sesuai kebutuhan”

   <!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Coba-coba</title>
   <script class="hiddenSpellError"><!--mce:0--></script>
   <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
   <script src="jQuery.<span class="><!--mce:1--></script>
   <script type="text/javascript">
   	$(document).ready(function(){
   		$("#map1").bMap({
   			mapZoom: 5,
   			mapCenter:[-1.098565,113.90625]
   		});
   	});
   
   	$(document).ready(function(){
   		$('#map1').data('bMap').AJAXMarkers({
   			serviceURL: 'db_maps.php',
   			action: "Markers"
   		});
   	});
   
   </script>
   </head>
   <body>
   
   <div style="width: 100%; height: <span class=;">500px;margin:0 auto; border: #373737 4px; border-bottom: #525252 4px solid; border-top-style: ridge;" id="map1"></div>
   </body>
   </html>
   

8. Buat file PHP taruh d local htdocs temen-temen, disini saya namain db_maps.php “buat ambil databasenya”

   <?
   	//Koneksi
   	$koneksi = mysql_connect("localhost","root","");
   	$selectdb = mysql_select_db("mygps" , $koneksi);
   
   	$SQLquery = "SELECT * FROM gps";
   	$result = mysql_query($SQLquery);
   	$counter = 0;
   
   	//Send layer properties
   	echo '{ "name":"Markers", "type":"marker", "data" : [ ';
   	//Loop markers, sending to client
   	while($row = mysql_fetch_array($result)){
   		if ($counter != 0) { echo "," ; }   //Dealing with commas
   		echo '{"lat":"' . $row['latitude'] . '","lng":"' . $row['longitude']. '","title":"' . $row['title']. '","icon":"' ."images/icon/". $row['icons']. '","body":"' . $row['content']. '"}';
   		$counter++;
   	}
   	echo " ] }";   //finishing up, and sending to client
   ?>
   

Kira-kira seperti ini :

 

CMIIW…. 😀