Menampilkan KML Layer pada Google Maps

Jellykom - Halo sobat, kali ini admin akan share cara menampilkan kml/kmz layer pada Google Maps. kml/kmz sendiri merupakan jenis map yang dibangun menggunakan bahasa xml. Map dengan ekstensi kml/kmz sendiri merupakan jenis map standar yang digunakan oleh Google, baik pada Google Maps maupun Google Earth.

Untuk membuat peta dengan jenis kml/kmz sendiri sobat bisa membuatnya melalui aplikasi Google Earth atau bisa juga dengan mengkonversi map berekstensi shp yang menjadi standar peta digital memkajadi file kml/kmz terlebih dahulu.

Jika sobat sudah memiliki file kml dan ingin menampilkannya pada Google Maps, silahkan sobat menggunakan script dibawah ini. Sesuaikan dengan program yang telah sobat buat sebelumnya. Untuk projectnya, mungkin sobat bisa juga melihat postingan Project GIS Menggunakan Codeigniter + Google Maps + KML Layer

Kode Google Maps API JS, bisa juga sobat tambahkan API Key sobat dikode ini.

<script src="https://maps.googleapis.com/maps/api/js"></script>

Kode Script CSS

Ini kode CSS untuk menngatur ukuran peta

<style>
body,
html,
#map {
height: 100%;
width: 100%;
}
</style>

Kode Javascript.

Ini script yang paling penting sob, karna google maps memang menggukanan javascript untuk codingnya.

<script>
// layers to toggle
var layers = [];
//disini layer kml nya
layers[0] = new google.maps.KmlLayer('http://jellykom-sig.rf.gd/petakml/BatasKecamatanSeputihBanyak.kml', {
preserveViewport: true});
layers[1] = new google.maps.KmlLayer('http://jellykom-sig.rf.gd/petakml/BatasDesaKecamatanSeputihBanyakFillAluss.kml', {
preserveViewport: true});
// end layers to toggle 

// intialize
function initialize() {
var myLatlng = new google.maps.LatLng (-4.848330, 105.479177); //disini fokus mapnya (seputih banyak lamteng)
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE //tipe map satelit bisa juga roadmap
};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
loadKml = function (opts, map) {
var layer = new google.maps.KmlLayer();
opts.preserveViewport = true;
if (map) {
opts.map = map;
}
google.maps.event.addListener(layer, 'defaultviewport_changed', function () {
var map = this.getMap(),
bounds = map.get('kmlBounds') || this.getDefaultViewport();
bounds.union(this.getDefaultViewport());
map.set('kmlBounds', bounds);
map.fitBounds(bounds);
});
layer.setOptions(opts);
return layer;
};

function toggleLayers(i) {
if (layers[i].getMap() == null) {
layers[i].setMap(map);
} else {
layers[i].setMap(null);
}
google.maps.event.addListener(layers[i], 'status_changed', function () {
document.getElementById('status').innerHTML += "panggil layer(" + i + ") [setMap(" + layers[i].getMap() + "] status map: " + layers[i].getStatus() + "<br>";
});
}
// end toggle layers

google.maps.event.addDomListener(document.getElementById('layer_01'), 'click', function (evt) {
toggleLayers(0);
});
google.maps.event.addDomListener(document.getElementById('layer_02'), 'click', function (evt) {
toggleLayers(1);
});

// toggle layers at the beginning
toggleLayers(0);
toggleLayers(1);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Kode HTML

Ini list coding untuk mengaktifkan kml layer menggunakan checkbox

Batas Kampung<input type="checkbox" id="layer_01" checked="checked" />
Batas Kecamatan<input type="checkbox" id="layer_02" checked="checked" />
<div id="map"></div>
<div id="status"></div>

Untuk melihat demo bisa sobat klik link dibawah ini

DEMO

DOWNLOAD