Cara Menampilkan KML di Google Map

KML adalah sebuah layer yang berisi kumpulan titik koordinat di peta yang membentuk polyline atau polygon. Layer ini berada di ‘atas’ tampilan Google Maps, jadi hanya web dengan script yang memanggilnya sajalah yang menampilkan file KML tersebut. Anda sebenarnya bisa menampilkan polyline/polygon secara langsung di google map, namun kalau titik koordinat sudah terlalu banyak (mesh) tentunya cara pendefinisian satu persatu tidaklah efektif. Nah, solusinya adalah menggunakan KML (Keyhole Markup Language) ini. KML ini sebenarnya adalah sebuah file XML yang memuat kumpulan koordinat dan definisi polyline/polygon di dalamnya. Jadi pada intinyanya cara menampilkan KML di Google Map adalah: semua definisi koordinat titik polygon akan kita satukan dalam sebuah file, kemudian kita panggil function di Gogle Maps javascript untuk menampilkannya. Cara ini jauh lebih efisien daripada harus mendefinisikan tiap titik koordinat satu persatu. Bagaimana caranya? Simak tutorial sbb:

Cara Mudah membuat file KML

Untuk membuat file KML caranya sangat mudah. Ada dua cara, yang pertama membuat file KML menggunakan text editor (Notepad, dll) dengan format yang sudah ditentukan. Cara kedua, ini lebih mudah, yaitu dengan online tools di http://www.mapmash.in/kmlpolyline.html. Di web ini Anda bisa mendefinisikan KML Anda secara visual. Contoh :

1. Search lokasi yang akan dibuat file KML-nya. Contoh: saya akan membuat file KML di seputar kota Bandung. Saya ketik ‘bandung’ di kotak search sebelah kanan atas, dan tekan tombol ‘Go’.
2. Klik mouse di titik-titik yang akan dibuat polyline-nya. Jika sudah, klik titik terakhir (marker berwarna merah) dan isi data file KML sesuai kebutuhan Anda. 
3. Klik tombol ‘Save as KML’ di sebelah atas peta, dan klik tombol ‘Generate KML’ 
4. Copy script XML di kotak di atas tombol ‘Generate XML’ dan paste ke Notepad/Notepad+++ Anda, dan simpan dengan ekstensi ‘.kml’. Contoh: ‘bandung1.kml’

Di notepad, beri tanda petik dua (“) mengapit nama file untuk menyimpan file selain ekstensi ‘.txt’ (text files)

5. Upload file Anda ke file hosting online (contoh ke dropbox atau ke web hosting). Harus online ya, kalau tidak google tidak dapat me-render-nya. Contoh kali ini saya akan mengupload file KML ini ke webhosting saya sendiri di folder ‘saptaji.com/geo’

Cara menampilkan KML di Google Maps dengan Javascript

Setelah langkah-langkah di atas dilakukan, saatnya untuk mendeklarasikan script (javascript) di file html yang menampilkan peta Google Maps. Caranya cukup mudah cukup dengan memanggil function google.maps.KmlLayer sebagai berikut :

var KMLbandung = new google.maps.KmlLayer({
    url: 'https://saptaji.com/geo/bandung1.kml',
    map: map
  });

Script di atas diletakkan di function inisialisasi peta Google Maps. Untuk file html selengkapnya dapat di download disini

[AdSense-A]

Untuk melihat hasilnya, silahkan panggil nama file html yang berisi file KML tadi. Contoh; saya menyimpan file html dengan nama ‘kml.html’ di c:/program files/xampp/htdocs/tutorial. Maka saya akan memanggil file tersebut di web browser dengan mengetikkan ‘http://localhost/tutorial/kml.html’ di address bar. Di sini Anda harus menginstal XAMPP (apache, php5, mysql inside) dulu ya, googling aja pasti nemu, free lagi. Hasilnya dapat Anda lihat seperti gambar di bawah

Cukup mudah bukan? Anda dapat pula mengedit file KML tadi dengan apikasi text editor sesuai dengan kebutuhan Anda. Semoga bermanfaat.

Saptaji, ST. M.Tr.T

a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com