Menampilkan Polygon Dari KML Di Google Maps

Dipublikasikan oleh El Cicko pada

Menampilkan Polygon Dari KML Di Google Maps 1

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

El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

29 Komentar

Azhar · Februari 20, 2013 pada 5:42 pm

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

    El Cicko · Februari 21, 2013 pada 9:12 pm

    oy….ente geus pindahan? engke urang ulin lah

      Agung Sumbowo · Mei 13, 2018 pada 9:15 pm

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

Frankie · Maret 6, 2013 pada 5:11 pm

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

deta · Juli 23, 2013 pada 3:59 pm

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 · Juli 23, 2013 pada 9:44 pm

    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

fandie · Maret 6, 2014 pada 1:17 pm

klo mau nambahin multi markernya di kml gimana ya

and_riyan · November 9, 2014 pada 10:39 pm

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

idik · Februari 20, 2015 pada 3:22 pm

maaf mas. kalo membuat peta KML gitu caranya gimana

    El Cicko · Februari 23, 2015 pada 2:18 pm

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

Fahmi · April 12, 2015 pada 7:09 pm

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

Teten · Desember 4, 2015 pada 10:46 am

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?

Dian · Desember 8, 2015 pada 7:16 pm

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

rendy permana · Juni 1, 2016 pada 1:10 am

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

    El Cicko · Juni 1, 2016 pada 2:02 am

    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 😀

pratama · September 14, 2016 pada 11:07 pm

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

    El Cicko · September 15, 2016 pada 1:21 am

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

      pratama · September 15, 2016 pada 8:06 am

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

Agus Muhajir Agus Muhajir · Oktober 8, 2016 pada 2:30 pm

ijin nyoba ya ilmunya…. ;-D

Dimas Demms · Oktober 14, 2016 pada 4:12 pm

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

    rezarion · Oktober 31, 2016 pada 1:26 am

    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 · November 17, 2016 pada 10:16 am

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

Agung Tamaka · Februari 5, 2019 pada 7:26 pm

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

Eing · April 9, 2020 pada 9:14 pm

Maaf mau nanya, saya ikuti sesuai tutorial di atas. tapi kok gak tampil petanya? tolong jawabannya kak.

Menampilkan Multi Polygon Arrays di Google Maps · Agustus 25, 2015 pada 5:07 am

[…] Menampilkan Polygon Dari KML Di Google Maps […]

Tinggalkan Balasan ke deta Batalkan balasan

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