Menambahkan Maps pada Phonegap

Oke setelah kemaren saya telah menjelaskan tentang phonegap dan beberapa coding penerapan phonegap dalam pembuatan aplikasi Mobile. Nah kali ini saya akan coba lagi menjelaskan tentang cara menambahkan tampilan maps pada aplikasi yang sedang kita buat.. Untuk penambahan maps pada aplikasi yang akan kita buat di phonegap ini terinspirasi dari situs m.stanford.edu dan terinspirasi dari ide teman saya untuk menerapkan aplikasi sejenis itu di Android.
Berikut ini adalah tampilan maps yang telah saya jalankan pada Android saya:
a
Pengen tahu bagaimana cara pembuatannya???
Oke pertama yang harus dilakukan adalah download dulu file jquery.js, bisa di download di sini http://jquery.com/download/
Setelah itu silahkan download file gmaps.js di sini http://hpneo.github.com/gmaps/
Dan satu lagi ingat jangan lupa untuk menambahkan koding di bawah ini, agar maps bisa berjalan karena kita memanfaatkan API dari google maps. Taruh kode ini diantara tag head

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Apabila sudah sekarang kita akan memasukkan kodingannya. Ini dia full kodingannya.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Maps</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript" src="js/gmaps.js"></script>
  <style type="text/css">
  #map{
  display: block;
  width: 95%;
  height: 350px;
  margin: 0 auto;
  -moz-box-shadow: 0px 5px 20px #ccc;
  -webkit-box-shadow: 0px 5px 20px #ccc;
  box-shadow: 0px 5px 20px #ccc;
  }
  #map.large{
  height:500px;
  }
  </style>
  <script type="text/javascript">
    $(document).ready(function(){
        var map = new GMaps({
              div: '#map',
              lat: -6.344447,
              lng: 106.736697
        });
        map.addMarker({
            lat: -6.344447,
            lng: 106.736697,
            title: 'Universitas Pamulang',
            infoWindow: {
                content: '<b>Universitas Pamulang</b><br /> \n\
                          Jl. Surya Kencana No. 1 Pamulang Barat Tangerang Selatan - Banten 15417 Indonesia'
            }
        });
    });
  </script>
</head>
<body>
          <div id="map"></div><br />
          
</body>
</html>

Dan untuk informasi lebih lanjut tentang cara penggunaan gmaps.js ini. Anda bisa membaca dokumentasinya di sini http://hpneo.github.com/gmaps/examples.html
Oya untuk menentukan latitude dan longitude seperti di atas yang pada bagian ini:

lat: -6.344447,
lng: 106.736697

Silahkan baca di sini https://imron02.wordpress.com/2013/03/29/mencari-latitude-dan-longitude-di-google-maps/

Advertisements

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