Press "Enter" to skip to content

Menampilkan Polygon Dari KML Di Google Maps

Artikel saya yang baru ini akan membahas bagaimana caranya menampilkan Polygon dari KML di Google Maps. Polygon sendiri adalah sekumpulan array dari koordinat-koordinat lattitude dan longitude yang tergabung menjadi satu dan diberi warna sehingga terlihat unik. Polygon dapat digunakan sebagai batas dan luas suatu wilayah pada peta.

Menampilkan Polygon Dari KML Di Google Maps #Script

Untuk membuat file KML kamu bisa memanfaatkan fasilitas Google Earth atau generator KML yang ada di internet. Sekarang kita buka text editor dan ketikkan script berikut ini

<html>
  <head>
    <title>Google Maps KML</title>
    <script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <!-- memanggil library geoxml3 untuk parsing data kml ke peta -->
    <script src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js" type="text/javascript"></script>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      var peta;
      function peta_awal() {
        var jawa_barat = new google.maps.LatLng(-7.090911, 107.668887);
        var petaoption = {
          zoom: 8,
          center: jawa_barat,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        peta = new google.maps.Map(document.getElementById("petaku"),
        petaoption); /** disini kita panggil function dari geoXML3 untuk memparsing file kml */
        var geoXml = new geoXML3.parser({
          map: peta
        }); /** letak file kml */
        geoXml.parse('jawa_barat.kml');
        google.maps.event.addListener(peta, 'click', function (event) {
          kasihtanda(event.latLng);
        });
      }
    </script>
  </head>
  <body>
    <h2>Google Maps KML</h2>
    <div id="petaku" style="height: 500px;"></div>
  </body>
</html>

Menampilkan Polygon Dari KML Di Google Maps #Output

Menampilkan Polygon Dari KML Di Google Maps

Untuk penampakannya seperti ini :

Mudahkan? untuk full sourcecode-nya bisa di download disini, silahkan dicoba dan semoga bermanfaat 😀

UPDATE : Menampilkan Multi Polygon Arrays di Google Maps

download button

28 Comments

  1. Azhar Azhar Februari 20, 2013

    hai sob, ^^ selamat ya udh kerja lagi… di Jakarta ya sekarang/. sukses ya bro….

    • El Cicko El Cicko Post author | Februari 21, 2013

      oy….ente geus pindahan? engke urang ulin lah

      • Agung Sumbowo Agung Sumbowo Mei 13, 2018

        Kang, ada koordinat kabupaten/kota jawa barat yg lengkapnya?

  2. Frankie Frankie Maret 6, 2013

    mantep bro baru tau bisa customize kaya gitu.. coba ah

  3. deta deta Juli 23, 2013

    halo elcicko
    saya sudah download source kode tapi masih juga gak ngerti
    saya mau buat google maps api di dalam web
    saya punya file kml tapi saya bingung menyimpan file itu supaya bisa masuk script yang dibuat elcicko

    tolong pencerahanya

    • El Cicko El Cicko Post author | Juli 23, 2013

      begini nich mas deta…
      pertama…di load dulu API dari GEOXML diheadernya
      abis itu kita bikin function di javascript untuk manggil kml yang kita buat….yang udah saya buat di scriptnya
      file kmlnya di taro di luar aja biar lebih gampang….
      nah..tinggal di tampilkan aja dalam div

  4. fandie fandie Maret 6, 2014

    klo mau nambahin multi markernya di kml gimana ya

  5. and_riyan and_riyan November 9, 2014

    pada script bagian mana y mas, kug bisa memberikan warna yang berbeda di masing2 wilayah?
    saat saya ganti dg file kml saya, warna yg muncul adalah warna default (merah)..
    mohon penjelasannya.. thanks

  6. idik idik Februari 20, 2015

    maaf mas. kalo membuat peta KML gitu caranya gimana

    • El Cicko El Cicko Post author | Februari 23, 2015

      bisa pake bantuan google earth mas idik, coba aja cari referensinya di Google 😀

  7. Fahmi Fahmi April 12, 2015

    Punten kang, kl file KML memang harus customize sendiri ya atau ada situs yg menyediakan?

  8. Teten Teten Desember 4, 2015

    mas saya bkin aplikasi yang akses kml file, warna di region kml file itu nanti bisa dirubah-rubah sesuai dengan nilai yang sudah di definisikan di aplikasi itu, itu kira-kira gmn ya mas? ada saran ngga?

  9. Dian Dian Desember 8, 2015

    permisi mas mau nanya, untuk file kml nya sendiri apa harus dimasukkan ke dalam folder xampp\htdocs ?
    saya mencoba menggunakan localhost dulu soalnya. tapi saya bingung harus meletakkan file .kml tersebut dimana.
    matur nuwun, saya masih baru di dunia percodingan jadi masih asing juga dengan coding2 hehe

  10. rendy permana rendy permana Juni 1, 2016

    kang pertamanya nampil, tapi beberapa hari kemudian ga bisa nampil, apa berpengaryh terhadap versi google map nya?

    • El Cicko El Cicko Post author | Juni 1, 2016

      alamat untuk GeoXML3 di Google Code udah expire kang, bisa diakses disini. Untuk resolve-nya coba ganti URL-nya ke alamat yang baru di GitHub. URL-nya disini. Semoga membantu kang 😀

  11. pratama pratama September 14, 2016

    itu dapet file .kml nya darimana ya? jika berkenan berbagi

    • El Cicko El Cicko Post author | September 15, 2016

      saya bikin sendiri gan, boleh…tinggal download aja gan 🙂

      • pratama pratama September 15, 2016

        masalahnya saya lagi nyari referensi batas wilayah yang nyampe tingkat kecamatan, sudah nyari belum ketemu,.. mungkin agan punya referensi?

  12. Dimas Demms Dimas Demms Oktober 14, 2016

    Mas ketika saya coba tes kok warna dari polygon KML nya ngga muncul ya, mohon pencerahannya.

    • rezarion rezarion Oktober 31, 2016

      diedit aja mas file kml nya, dikasih polygonStyle, saya kemarin juga gitu, dikasih warna misal 15 warna (warna kml bukan cmyk/rgb) pake styleUrl, trus tinggal dipanggil sesuai jumlah area yg dibutuhkan..

      • bambs bambs November 17, 2016

        bisa di kasih contoh source codenya gak mas, warna poligon saya jg gk muncul.

  13. Agung Tamaka Agung Tamaka Februari 5, 2019

    Dalam satu KML Jawa Barat tentunya memiliki marker koordinat tiap-tiap kota, lalu gimana caranya untuk membuat marker itu berbeda warna sesuai kondisi fungsi yang kita tentukan. Semisal, satu kota akan berwarna merah jika jumlah penduduknya kurang dari 500 jiwa, akan berwarna hijau jika lebih dari 10000 jiwa. Terima gaji gan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *