Jumat, 18 April 2014

Sistem Informasi Geografis Web dan Mobile

Menampilkan Marker dan Manipulasi Data Dari Mysql


API adalah kependekan dari Application programming interface dengan bahasa yang lebih sederhana, yang sangat berguna bagi pengembang web maupun aplikasi desktop untuk memanfaatkan berbagai fitur yang disediakan oleh Google seperti misalnya: AdSense, Search Engine, Translationmaupun YouTube. API secara sederhana bisa diartikan sebagai kode program yang merupakan antarmuka atau penghubung antara aplikasi atau web yang kita buat dengan fungsi-fungsi yang dikerjakan. Jadi Google maps API adalah fungsi-fungsi pemrograman yang disediakan oleh Google maps agar Google maps bisa di integrasikan kedalam Web atau aplikasi yang sedang buat. Contoh sederhanya misalkan ketika ingin membuat Sistem informasi Geografis rumah tetangga, dengan memanfaatkan Google Maps API user bisa membuat GIS tanpa perlu memikirkan Pemetaan Rumah, hanya perlu memanggil fungsi Google maps dan memanggil fungsi-fungsi lain yang dibutuhkan seperti menampilkan peta, menempatkan marker dan sabagainya. 
Tugas 3 kali ini adalah menyambung dari tugas kedua sebelumnya. Data yang telah disimpan dalam MySQL sekarang coba ditampilkan kedalam peta. Berikut adalah data yang telah disimpan pada MySQL. Buat kontainer sebagai tempat untuk menampilkan peta dengan pusat latitude dan longitude yang dipilih. Kode program 1 adalah kode program untuk membuat kontainer peta.
html>

<head>
  <title></title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script src="jquery.js"></script>
  <script src="maps.js"></script>
</head>

<body>
      <div id="petaku" style="width:600px; height:500px">
      </div>
</body>

</html>
Kode Program 1 Membuat Kontainer Peta

            Buat file JavaScript untuk membuat fungsi menampilkan marker. Kode Program 2 adalah menampilkan marker sesuai dengan latitude dan longtitude yang terdapat dalam database.
// JavaScript Document

$(document).ready(function(){
      var gmaps=google.maps;
      var mapOptions={
            zoom: 18,
            //disableDefaultUI:true,
            draggable:false,
            center:new gmaps.LatLng(-8.79359,115.158623)
            }; //ini menampilkan peta, dengan -8.79359,115.158623 sebagai centernya, jadi yang muncul di peta hanya sekitaran latitude longitude itu.
           
            muncul=new google.maps.Map(document.getElementById('petaku'),mapOptions); //mengambil peta tsb dan ditampilkan di kontainer
           
            $.get('simpandata.php',function(output){
                  for(i=0;i<output.length;i++){
                              //$('<tr><td>'+output[i].ID+'</td><td>'+output[i].Latitute+'</td><td>'+output[i].Longtitute+'</td><td>'+output[i].Nama_Pemilik+'</td><td>'+output[i].Alamat_Pemilik+'</td></tr>').appendTo('#tabel');
                  var marker= new google.maps.Marker({ //menampilkan marker
                              position:new google.maps.LatLng(output[i].Latitute,output[i].Longtitute),
                              map:muncul,
                              title:output[i].Alamat_Pemilik //menampilkan informasi di window ketika kursor digeser ke arah marker, muncul data alamat pemilik rumah
                        });
                       
                        var informasi=new google.maps.InfoWindow({
                              position:new google.maps.LatLng(output[i].Latitute,output[i].Longtitute),
                        }); //membuat info window
                       
                        google.maps.event.addListener(marker,'click',function(event){
                              informasi.setPosition(event.latLng);
                              informasi.setContent(event.latLng.toString());
                              informasi.open(muncul); //menampilkan informasi di window ketika marker di klik
                  });
           
            }
       },'json');      
           
});
Kode Program 2 Menampilkan Marker pada Peta

1 komentar:

  1. sore gan
    artikel ini sangat membatu saya buat tugas Pelajaran sistem informasi geografis.
    saya ucapkan termakasih banyak
    semoga berrmamfaat bagi pengungjung lainnya


    Kunjungin website kami juga Gan
    Di:
    https://bakri48.mahasiswa.atmaluhur.ac.id/
    http://www.atmaluhur.ac.id

    BalasHapus