Jquery Mobile & Phonegap & Maps


jquerymobile_googlemaps

Beberapa hari lalu coba lagi nge devevelop Aplikasi Android, seperti biasa pake Phonegap Jquery Mobile dan sekarang coba mainin API Google Maps. Simple sih mainin Maps, tapi pas di praktekin. hahaha Parah ABEZZZZ gak segampang yang di bayangngin.

Setelah Googling sana sini, baca sana sini, akhirnya hati yang lembut ini jatuh ke GMAPS.JS, yap plugin javascript yang selalu memudahkan developer untuk do something better. udah lah gak usah banyak omong lagi. disini gue kasih contoh yang sederhana aja ya.

Pertama lu mendig downlad dulu aja si gmaps.js nya, insert ke app Phonegap lu.

nanti kira kira html nya jadi kaya gini:

Contoh di bawah adalah Aplikasi dimana mencari marker yang terdekat dari posisi awal kita.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GMaps.js &mdash; Basic</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" href="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js</a>"></script>
  <script type="text/javascript" src="<a class="linkification-ext" title="Linkification: http://maps.google.com/maps/api/js?sensor=true" href="http://maps.google.com/maps/api/js?sensor=true">http://maps.google.com/maps/api/js?sensor=true</a>"></script>
  <script type="text/javascript" src="gmaps.min.js"></script>
     <link rel="stylesheet" href="<a class="linkification-ext" title="Linkification: http://jquery.mobile/jquery.mobile-1.4.5.min.css" href="http://jquery.mobile/jquery.mobile-1.4.5.min.css">jquery.mobile/jquery.mobile-1.4.5.min.css</a>" />
    <script src="<a class="linkification-ext" title="Linkification: http://code.jquery.com/jquery-1.8.3.min.js" href="http://code.jquery.com/jquery-1.8.3.min.js">http://code.jquery.com/jquery-1.8.3.min.js</a>"></script>
    <script src="<a class="linkification-ext" title="Linkification: http://jquery.mobile/jquery.mobile-1.4.5.min.js" href="http://jquery.mobile/jquery.mobile-1.4.5.min.js">jquery.mobile/jquery.mobile-1.4.5.min.js</a>"></script>
  <link rel="stylesheet" href="<a class="linkification-ext" title="Linkification: http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css</a>" />
  <link rel="stylesheet" type="text/css" href="<a class="linkification-ext" title="Linkification: http://jquery.mobile/examples.css" href="http://jquery.mobile/examples.css">jquery.mobile/examples.css</a>" />
    <script type="text/javascript">
    var map;
    $(document).ready(function(){
          map = new GMaps({
            el: '#map',
            lat: 0,
            lng: 0,
            zoomControl : true,
            zoom: 11,
            zoomControlOpt: {
                style : 'SMALL',
                position: 'TOP_LEFT'
            },
            panControl : false,
            streetViewControl : false,
            mapTypeControl: false,
            overviewMapControl: false
          });

    // Define user location
          GMaps.geolocate({
              success: function(position) {
                map.setCenter(position.coords.latitude, position.coords.longitude);

            // Creating marker of user location
                  map.addMarker({
                      lat: position.coords.latitude,
                      lng: position.coords.longitude,
                      title: 'Current Position',
                      icon: "img/marker/filed.png",
                      infoWindow: {
                          content: '<p>You are here!</p>'
                        }
                });
                  map.addMarker({
                      lat: -6.395087,
                      lng: 106.799469,
                      title: 'Mampang Plastik',
                      infoWindow: {
                          content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Mampang Plastik<div style="font-weight:normal;font-size:x-small">Jl Raya Sawangan No.82 Mampang Pancoran Mas <br>T 021-95515955 <br><a href="#">Lihat Toko</a></div></div> '                      }
                    });
                  map.addMarker({
                      lat: -6.4315201,
                      lng: 106.7149398,
                      title: 'Riyan Plastik',
                      infoWindow: {
                          content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Riyan Plastik<div style="font-weight:normal;font-size:x-small">Jl. H Mawi Belakang Polsek Parung, Penampungan <br>T 085780034250 <br><a href="#">Lihat Toko</a></div></div>   '                      }
                    });
                  map.addMarker({
                      lat: -6.4321685,
                      lng: 106.7167097,
                      title: 'Sahrul Plastik',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Sahrul Plastik<div style="font-weight:normal;font-size:x-small">Jl. H Mawi Ps. Parung, Depan Eissel Fashion <br>T 081386636021 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.2347942,
                      lng: 106.5498069,
                      title: 'Toko Asia',
                      infoWindow: {
                        content: '<img src="img/fm2010.png" style="float:left;margin-right:5px"><div>TOKO Asia<div style="font-weight:normal;font-size:x-small">Jl. Raya Juanda, Bogor<br> T 087873076087 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.27536,
                      lng: 106.8709249,
                      title: 'Cikuray',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Cikuray<div style="font-weight:normal;font-size:x-small">Jl. Raya Bogor Depan Pintu I, Ps. Induk Buah Kramat Jati<br>T 081384530540 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4570535,
                      lng: 106.8492695,
                      title: 'Cahaya Purnama Plastik',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Cahaya Purnama Plastik<div style="font-weight:normal;font-size:x-small">Jl. Pemuda Harapan, Rt 01/13 No. 91, Pabuaran Cibinong <br>T 081319812103 &frasl; 0817389303 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Lintang Mandiri Citereup',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Lintang Mandiri Citereup<div style="font-weight:normal;font-size:x-small">Jl. Puspanegara Kp. Kebon Kopi , Citereup Bekasi<br>T 0816812597 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Nusantara',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Nusantara<div style="font-weight:normal;font-size:x-small">Jl. Baru Bekasi Under Pas Duren Jaya <br>T 082110158688 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Sari Utama',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Sari Utama<div style="font-weight:normal;font-size:x-small">Jl. Prof Yamin No. 4 Ps Baru Bekasi <br>T 085266149888 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Putro Tri Mulyo',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Putro Tri Mulyo<div style="font-weight:normal;font-size:x-small">Komp Jati Unggul A2 No.1 Bekasi Utara <br>T 08164800709 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Yanto',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Yanto<div style="font-weight:normal;font-size:x-small">Pasar Leuwiliang Blok Abk Bogor <br>T 081380368475 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Maju',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Maju<div style="font-weight:normal;font-size:x-small">Jl. Raya Pasar Anyar Bogor <br>T 081212535867 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Ade',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Ade<div style="font-weight:normal;font-size:x-small">Jl Raya Pasar Ciampea Bogor <br>T 081218747361 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Inti Ciluer',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Inti Ciluer<div style="font-weight:normal;font-size:x-small">Jl Raya Ciluer Bogor <br>T 081316731199 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Inti Merdeka',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Inti Merdeka<div style="font-weight:normal;font-size:x-small">Jl Raya Merdeka Bogor <br>T 02518337112 <br><a href="#">Lihat Toko</a></div></div>
'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Tiga Rasa Bakery',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Tiga Rasa Bakery<div style="font-weight:normal;font-size:x-small">Jl Raya Pengasinan Gg Makam No 71, Bogor <br>T 087832045226 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Dida Snack',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Dida Snack<div style="font-weight:normal;font-size:x-small">Jl Raya Pasar Parung, Bogor <br>T 08568553296 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'Toko Usaha Mandiri',
                      infoWindow: {
                        content: '<img src="img/fm2011.png" style="float:left;margin-right:5px"><div>Toko Usaha Mandiri<div style="font-weight:normal;font-size:x-small">Jl Raya Pasar Jonggol, Bogor <br>T 081339074955 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'a',
                      infoWindow: {
                        content: 'b'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'a',
                      infoWindow: {
                        content: 'b'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'a',
                      infoWindow: {
                        content: 'b'                      }
                    });
                  map.addMarker({
                      lat: -6.4827334,
                      lng: 106.8755397,
                      title: 'a',
                      infoWindow: {
                        content: 'b'                      }
                    });
                       map.addMarker({
                      lat: -6.2347942,
                      lng: 106.5498069,
                      title: 'Toko Asia',
                      infoWindow: {
                        content: '<img src="img/fm2010.png" style="float:left;margin-right:5px"><div>TOKO Asia<div style="font-weight:normal;font-size:x-small">Jl. Raya Juanda, Bogor<br> T 087873076087 <br><a href="#">Lihat Toko</a></div></div>'                      }
                    });
              },
              error: function(error) {
                alert('Geolocation failed: '+error.message);
              },
              not_supported: function() {
                alert("Your browser does not support geolocation");
              },
              always: function(){
                  alert("Done!");
                }
          });
          
    });
  </script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
  <h1>Red Bell App</h1>
    </div><!-- /header -->

    <div data-role="content">
<div class="row">
    <div class="span11">
      <div id="map"></div>
    </div>
  </div>
      </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Space Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

 

Buat yang mau download bisa pke link ini https://drive.google.com/file/d/0B-jCB9FDQE13Um5SVTlGTHJIVkU/view?usp=sharing

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