Mengambil Latitude-Longitude Google Maps dari Database

Posted: March 14, 2011 in Maps Lanjutan

Lanjutan dari Artikel Google Maps jama baholo kala :D 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 :D

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

sekarang yang perlu disiapin :D

  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 :D 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 :D
  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…. :D

Comments
  1. maman says:

    gak jalan gan..

  2. ishol says:

    mas bagaimana caranya penggunaan google maps di komputer local (localhost),coz kebanyakan pengguna google maps itu harus connect ke internet…
    makasih…

    • kurniawandwi says:

      google maps offline dunk :D
      sepertinya itu yang belum bs, memang ada beberap tools untuk mendownload area yang kita mau, cm harus d proses dan d rubah dulu buat menyesuaikan dengan program kita.
      kalo saya mending milih buat pake SIG biasa dr pada harus offlinekan google maps :D
      filenya akhirnya mbengkak karena mulai dari data2 zooming dan posisi lat-longnya disimpan dilocal :D

      malah ribet, namanya gratisan :D terima apa adanya aj , malah lebih uptodate dan presisi kalo online :D

  3. ishol says:

    brarti meskipun offline juga bisa…
    trus tutorial yang di atas itu offline ya..

  4. Drey says:

    Mas klo bikin tuh Map nongol disetiap halaman lokasi yg dibuat User kaya K0pr0l gmn y?
    Jadi satu Titik lokasi disetiap halaman… Makasih sebelumnya… Sukses selalu… :)

  5. ramdhan says:

    Mas mau tanya kalau kita ingin tahu latitude dan longitude dari mobile kita gimana ya.?
    ada gak framework yg bisa support banyak os mobile. jadi kita tinggal ambil gps datanya.

    terimakasih banyak :D Sukses ya.. Amin. :)

    • kurniawandwi says:

      mas mau pake under mobile apa dr web ? kalo dr web setahu saya ndak bs, kan harus dp resource data dr gadgetnya..

      kalo under mobile, bentar dulu mobile apa dulu, cos ndak semua gadget support untuk akses ni maps loh.

  6. hari says:

    mas…
    bagaimana cara menentukan latitude n longitude,untuk menentukan lokasi yang kita inginkan..
    makasih..

  7. mas ais says:

    Jazakallahu khoir…..

    tutorial anda sangt berguna untuk saya……

    terus berkarya…..

  8. riska says:

    salam kenal mas kurniawan…, lgsg aja. klo untuk pencarian berdasarkan jenis icon, misalkan riska mau cari jenis layanan umum seprti SPBU, klo kita searcH” keluar 1 spbu yang kita tujui. gimana dunk mas scriptnya @_@ hehe

  9. riska says:

    ia mas, gpp mas. mg sukses dalam aktivitas n rutinitasnya, simsalabim moga jin botol bisa memberikan yang terbaik dan bermanfaat kepada yang membutuhkan.

    • akhisud4r says:

      ass. mas salam kenal mau tanya dikit,
      saya bikin pake google maps api v3.

      nah saat saya jalankan di lokal aman2 aja tapi kalo diakses dari pc lain atau client maka markernya gak muncul d peta..kira2 apa ya mas

      • akhisud4r says:

        maaf mas , sudah ketemu . saya coba pake firebug ternyata url xmlnya diganti dengan ip web servernya

  10. akhisud4r says:

    oh iya mas, saya pake xml untuk nampilin datanya

  11. novriyanti says:

    mas mau tanya
    bisa ga latitude n longitudnya d setting otomatis tepat n akurat ke letakk posisi yg dituju??
    jd ga tebak2/kira2
    k google maps API’ny,,,

  12. novan_jepe says:

    script nya gx jalan om…saya dh liat kayakn ad yg slah tuuhh,,saya dh cobaa bnerin tp gx jalan jg,,heheh..

    tolong bantuanya..

  13. begoluh says:

    bro, knp kalau share banyak script yg disembunyikan. ha3x

    • kurniawandwi says:

      masak sih…. nah wonk aq copas langsung bro…

      beda bro, kalo main mashup pa lg google api, kalo error tinggal cek pakai firebug,

      mungkin saya ada yang kurang jelasinnya, nah kalo mau belajar google maps API dan lain sebagainya yang main mashup tech

      kudu ngerti JAVASCRIPT DOM sampai AJAX !!!

      kalo cm javascript dasar ndak nyambung… dibaca dunk dari awal q posting google maps API.

      nah mau loncat “ndak tau dasarnya” apa mau nyebrang pake jembatan “ngerti dasarnya”

    • kurniawandwi says:

      buat @begoluh
      yah kalo saya ndak bego mana mungkin disini, udah kerja di google saya !!
      :D

  14. mas,sy mau tanya..saya bikin aplikasi sms d android,trs kalau ingin mengetahui posisi si pengirim lewat sms tsb bisa gak ya?pingin ditampilin d peta gitu mas posisi si pengirimnya,misalnya berupa titik gitu..

    • kurniawandwi says:

      wah susah jg soalnya sms kan ndak da format GPSnya..

      kalo pengen sih bikin sendiri buat taruh di dalam hape tuh target, ntar kalo dia sms, ke include jg informasi GPSnya :)

      • benny says:

        mas kurniawan…
        kalo mau menambahkan tool search pada peta + ditandai dengan marker bagaimana ya caranya???
        mohon pencerahannya.. terimakasih..

      • kurniawandwi says:

        nambahin Bar Option mungkin yah ?

        if (GBrowserIsCompatible()) {

        // === discard all except the first two results ===
        function doSearchCompleteCallback(search) {
        search.results.splice(2);
        }

        var map = new GMap2(document.getElementById(“map”),{googleBarOptions:
        {onSearchCompleteCallback:doSearchCompleteCallback}
        })

        map.setCenter(new GLatLng(43.907787,-79.359741),12);
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());;

        map.enableGoogleBar();
        }

        jd ada custom search buat nyari tempatnya.

  15. harris says:

    Bro ini google map v2 atw v3?

  16. margaret says:

    mas, mau tanya.. gimana caranya mengambil data long n lat orang lain (yg pnya android) dan memasukkannya ke database mysql?

  17. Ekky says:

    mas..kal0 pake CI jadi gmna ya mas kodingannya??

  18. eka says:

    cara buat masukkan plugin bMap di Jquery gmna?

    • kurniawandwi says:

      ternyata scriptnya kok error yah pas di paste, dulu ndak kok…. nanti saya posting lg dech..
      intinya sama, load jquery sama bmapnya… trus tinggal panggil fungsinya

      kan tinggal tulis

  19. whelly says:

    mas mau nanya nich.. gmn cara ngambil node jalan trus hasilnya di simpan di dalam database jalan.. kemudian kita ambil data tersebut untuk di jalankan pencarian terpendek

  20. eka says:

    cara memasukkan plugin bmpanya dmn?

  21. Adi says:

    iconnya ga tampil mas, tapi responsenya uda bener

  22. heatnix says:

    om jin,itu yg buat nyambungin index_maps.php ama db_maps.php perintahnya : serviceURL: ‘db_maps.php’ doank y om? cmiiw
    makasi om :)

  23. Pradana says:

    mas kalo auto update atau auto refresh untuk menampilkan data terakhir saja gimn? Biasanya untuk GPS gitu, jadi yang nampil hanya satu icon saja/
    Makasih pak, :)

  24. Adi W says:

    uda bisa mas.. tapi gimana ngecilin gambar iconnya? :D thanks

  25. Adi W says:

    oo ya,
    sistem saya, menampilkan beberapa tempat yang punya latitude dan longitude sendiri
    jadi intinya nanti 1 link di klik, diarahkan ke 1 page dan cm muncul 1 icon,, gimana biar tiap load 1 tempat, centernya jadi posisi tempat yg di load itu?

    thanksss bangettt

  26. Adi W says:

    kalo lat-lng nya dari database?

  27. Adi W says:

    maap :)

    mksd sy, kalo setcenternya pake latlng database scriptnya sperti apa..
    masih ucup ni mas..

    mohon bantuannya
    suwun :)

  28. Adi W says:

    kalo manual php nya gimana mas?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s