 |
| Kenampakan data poligon di dalam google maps |
Jumpa lagi guys, di kesempatan ini saya pengen coba untuk memasukkan data vektor berupa poligon ke dalam google map. Sebagai bahan studi kasus, akan digunakan peta batas administrasi Kota Yogyakarta, dan sekitarnya. Beberapa persayatan sebelum melakukannya, dibutuhkan beberapa hal berikut ;
- Data vektor yang akan ditampilkan, dengan format *.kml (koordinat geografik datum WGS 1984).
- Akun Google Drive, sebagai tempat hosting data vektor *.kml
- Koneksi internet yang stabil
Jika sudah lengkap persyaratan di atas, silahkan ikuti langkah kerja sebagai berikut ;
1. Siapkan data vektor berekstensi *.kml yang akan diunggah ke server (hosting)
2. Masuk ke halaman Google drive anda
3. Pilih menu create - folder
2. Masuk ke halaman Google drive anda
3. Pilih menu create - folder
5. Setelah itu, masuk ke dalam folder yang telah dibuat, lalu upload file *.kml
7. Jika sudah, silahkan ubah privasi data, agar bisa dibuka oleh public user.
Klik kanan pada folder yang tadi dibuat - Detail and activity - Sharing
10. Silahkan aktifkan mode Public Web, agar dapat diakses semua orang
Silahkan copy url hostingan kemudian simpan.
12. Tahap Selanjutnya anda tinggal memanggil data *.kml yang telah dihosting kemudian memanggilnya ke dalam peta menggunakan script
13. Silahkan copy kode dibawah, lalu ganti url yang saya beri tanda kuning, agar disesuaikan dengan url hostingan anda tadi. Simpan script dengan format *.html. Cek dulu, apakah data vektor poligon mau menampal pada google map atau tidak. Selamat mencoba!!..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 11
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googledrive.com/host/0B8HrWbUiOOh1STFGZGFlanJvYTg/admin.KML'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 11
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googledrive.com/host/0B8HrWbUiOOh1STFGZGFlanJvYTg/admin.KML'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon