Bagi penggemar game Microsoft Flight Simulator, tentu sudah tau untuk wilayah “gak jelas” seperti asia tenggara termasuk Indonesia, bangunan terminal airportnya “gak banget” karena cuma “kotak” biasa sampai jetway (garbarata)nya standar polos ga ada teksturnya. Agar bangunan terminal itu terlihat seperti aslinya, dibutuhkan instalasi addon scenery yang dibuat oleh para developer game scenery untuk airport-airport di Indonesia. Scenery yang mereka design dibuat sangat mirip model sampai texturnya, sehingga semakin terasa lebih real ketika bermain. Beberapa bulan lalu saya melakukan kompilasi scenery-scenery tersebut sehingga mudah bagi para “scenery hunter” untuk mencari scenery airport tertentu yang mereka belum punya. Syukurlah, dengan adanya portal informasi addon airport Indonesia ini, mempermudah banyak flightsimmers tanpa harus bingung download airport XX Indonesia dimana, semua informasinya ada di web kompilasi tersebut. Tetapi ada yang beda dari web kompilasi ini, karena saya ingin semua disajikan berbasis map peta Indonesia menggunakan Google Map, bukan hanya list download addon biasa. Pada kesempatan kali ini saya ingin mendokumentasikan proses pembuatan halaman web berbasis Google Map tsb.
Saya menggunakan Google Map API versi 2 (jadul sih.. hehe..) sehingga langkah pertama dan wajib, gunakan template Google MAP API versi 2 nya. Hanya dengan template sederhana ini sebenarnya sudah bisa membuat halaman informasi berbasis GMap yang keren.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 550px; height: 450px"></div>
<a href="basic1.htm">Back to the tutorial page</a>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
// A function to create the marker and set up the event window
// Dont try to unroll this function. It has to be here for the function closure
// Each instance of the function preserves the contends of a different instance
// of the "marker" and "html" variables which will be needed later when the event triggers.
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(43.907787,-79.359741),8);
// Set up marker with info windows
var point = new GLatLng(43.65654,-79.90138);
var marker = createMarker(point,'<div style="width:240px">This is baloon text<\/div>')
map.addOverlay(marker);
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
</body>
</html>
Hanya sedikit yang harus diubah agar bisa menjadi Sistem Informasi Geografis milik kita sendiri.. dimulai dari bagian:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=[YOUR_API_KEY]" type="text/javascript"></script>
Pada bagian ini jangan lupa generate Google API Key dulu maksudnya, hehe.. Kemudian lanjut ke bagian:
map.setCenter(new GLatLng(43.907787,-79.359741),8);
Ganti nilai Latitude dan Longitude center map di atas itu sesuai koordinat yang kita inginkan. Untuk contoh saya karena ingin mengambil peta seluruh wilayah Indonesia jika ditampilkan, center pointnya berarti ada di sekitar Selat Makassar. Bagaimana cara mengetahui koordinat di daerah tersebut? Dengan bantuan http://maps.google.com/ saya bisa mendapatkan koordinat daerah tertentu. Tinggal klik kanan -> What’s Here? dan koordinat titik tersebut akan muncul di search bar Google Map seperti terlihat pada gambar di bawah. Oke, titik tengah sudah diambil.. Apalagi yang harus diubah dari template Google Map di atas?
Setelah setCenter() nya diganti dengan koordinat yang sudah kita dapatkan, selanjutnya terakhir yang diubah adalah:
// Set up marker with info windows var point = new GLatLng(43.65654,-79.90138); var marker = createMarker(point,'<div style="width:240px">This is your custom message<\/div>') map.addOverlay(marker);
Cari koordinat titik yang mau dipasang markernya. Untuk mencari latitude dan longitudenya, bisa menggunakan “klik kanan -> What’s Here?” lagi… Markernya sendiri nantinya kalau diklik akan ada baloon window yang bisa dikustomisasi isinya (support HTML tag). Untuk membuat 3 marker, tinggal lakukan 3 kali dengan 3 koordinatnya. Contoh:
var point = new GLatLng(43.65654,-79.90138); var marker = createMarker(point,'<div style="width:240px">Disini rumahku<\/div>') map.addOverlay(marker); var point = new GLatLng(43.91892,-78.89231); var marker = createMarker(point,'Disini kantorku') map.addOverlay(marker); var point = new GLatLng(43.82589,-79.10040); var marker = createMarker(point,'Disini rumah mertua') map.addOverlay(marker);
Yap, hanya mengubah beberapa bagian saja, Anda sudah bisa mengkustomisasi Google Map khusus untuk anda. Contoh lainnya adalah saya membuat gallery foto backpacker saya juga berbasis Google Map hehe.. Selamat mencoba..
Beberapa contoh airport keren karya developer addon scenery:
2 thoughts on “Membuat Peta dengan Google Map: Indonesia Airport Scenery Compilation Project”