Latar belakang
Google Maps adalah layanan gratis Google yang cukup popular. Anda dapat menambahkan fitur Google Maps dalam web Anda sendiri dengan Google Maps API. Google Maps API adalah library JavaScript. Menggunakan/memprogram Google Maps API sangat mudah. Yand Anda butuhkan adalah pengetahuan tentang HTML dan JavaScript, serta koneksi Internet. Dengan menggunakan Google Maps API Anda dapat menghemat waktu dan biaya Anda untuk membangun aplikasi peta digital yang handal, sehingga Anda dapat focus hanya pada data-data Anda. Biarkan data peta-peta dunia menjadi urusan Google saja, saat ini versi terakhir Google Map API adalah versi 3. Versi ini, katanya, akan tampil lebih cepat dari versi sebelumnya khususnya untuk browser ponsel. Ya, ponsel, Anda bisa membangun situs web yang dilengkapi peta untuk iPhone dan ponsel dengan system operasi Android.
Bagaimana memulainya?
Saya ingin menampilkan
kota Depok di file HTML saya (di dalam komputer saya saja) pada tag div
berukuran 600 pixel x 600 pixel. Bagaimana melakukannya? Saya akan tunjukkan
kepada Anda, bagaimana menghasilkan peta seperti ini :
Menggunakan Google Maps API
Kita bisa mulai menulis program Google Map API dengan urutan sebagai berikut :
1. Memasukkan Maps API JavaScript ke dalam HTML kita.
2. Membuat element div dengan nama map_canvas untuk menampilkan peta.
3. Membuat beberapa objek literal untuk menyimpan property-properti pada peta.
4. Menuliskan fungsi JavaScript untuk membuat objek peta.
5. Meng-inisiasi peta dalam tag body HTML dengan event onload.
Beginilah kode program
dasarnya:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,
user-scalable=no"
/>
<!--
Langkah 1 -->
<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAA8tt4eKTuB
ZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA"></scri
pt>
<script
type="text/javascript">
// Langkah 4 function initialize() {
var latlng = new google.maps.LatLng(-6.4,
106.8186111); var myOptions = { zoom: 13, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Langkah 3
var
map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<!--
Langkah 5 -->
<body onload="initialize()">
<!-- Langkah 2 -->
<div id="map_canvas" style="width:600px;
height:600px"></div>
</body>
</html>
Perhatikan urutan
langkah-langkahnya yang saya tuliskan dalam komentar HTML dan JavaScript kode
HTML di atas.
Google Maps API key
Perhatikan baris ini:
<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAA8tt4eKTuB
ZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA"></scri
pt>
Kode yang saya cetak
tebal dan berwarna merah adalah Google Maps API key. Anda
harus mendaftar untuk
mendapatkan key untuk website Anda, jika Anda ingin menampilkan peta untuk
website Anda. Setelah mendaftar, termasuk memberikan alamat website Anda,
Google akan member Anda sebuah API key. Bentuknya kurang lebih seperti ini
(tentu saja milik Anda nantinya akan berbeda):
ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VL
kdrQF5grA
Key yang saya gunakan
di atas digunakan untuk computer local (saya daftarkan untuk alamat situ
localhost). Jadi, jika Anda ingin mencoba menulis program untuk dijalankan di
computer Anda sendiri, sementara Anda bisa pakai key ini. Nanti kalau program
Anda sudah siap, baru Anda perlu mendaftar sendiri API key Anda, kemudian
dipakai menggantikan API key contoh dari saya.
Parameter sensor berisi
true (berwarna hijau) digunakan untuk menggunakan sensor lokasi , misalnya GPS
(jika ada, misalnya jika aplikasi web based kita diakses dengan ponsel tertentu
yang memiliki GPS).
Elemen peta pada tag div
Pada baris ini:
<div
id="map_canvas" style="width:600px; height:600px"></div>
Kita menentukan lebar
tag div adalah 600px, dan lebar juga 600px, dengan style CSS. Ukuran peta yang
ditampilkan akan selalu mengikuti ukuran yang Anda tentukan pada tag
tersebut.
Setting peta
Kita menentukan setting
peta pada baris program ini:
var latlng = new google.maps.LatLng(-6.4, 106.8186111);
var
myOptions = { zoom: 13, center: latlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP };
Saya telah memberikan
lokasi Latitude dan Longitude pusat kota Depok, yaitu -6,4
dan 106.8186111.
Tentu Anda tidak
melupakan pelajaran Geografi selama SMP bukan? Ingat Lintang Utara/Selatan dan
Bujur Timur? Itulah
dia. Untuk kota Depok, posisi dalam peta latitude dan longitude-nya adalah -6,4
dan 106.8186111. Jadi, jika Anda ingin menampilkan kota Anda, misalnya Jakarta
Selatan atau Yogyakarta, maka Anda harus cari dulu lokasi kota Anda berdasarkan
Latitude dan Longitude. Anda bisa menggunakan informasi dari situs ConvertUnits.com untuk mengetahui berapa
latitude dan longitude kota Anda.
Parameter zoom menentukan zoom level yang Anda
inginkan. Semakin kecil nilainya, semakin jauh jarak pandang Anda dari tanah.
Nilai 0 akan menunjukkan peta seluruh dunia. Nilai maksimal adalah 19.
Parameter mapTypeId menentukan jenis peta yang
akan ditampilkan. Pilihannya ada 4:
1.
ROADMAP, ini yang saya pilih, untuk menampilkan peta
biasa 2 dimensi
2.
SATELLITE, untuk menampilkan foto satelit
3.
TERRAIN, untuk menunjukkan relief fisik permukaan bumi
dan menunjukkan seberapa tingginya suatu lokasi, contohnya akan menunjukkan gunung
dan sungai
4.
HYBRID, akan menunjukkan foto satelit yang diatasnya
tergambar pula apa yang tampil pada ROADMAP (jalan dan nama kota)
Sebenarnya ada 3
kelompok lagi jenis peta yang bisa dipakai, tetapi pembahasannya di luar
lingkup ebook ini. Mereka adalah:
•
Kelompok Google Map Maker, peta-peta dalam
kategori ini merupakan kontribusi dari seluruh dunia
•
Kelompok peta Celestial, selain peta bumi,
Google juga menyediakan peta bulan, dan Mars
•
Kelompok peta 3D, membutuhkan plugins Google
Earth
Menampilkan peta pada tag div
Di atas, kita telah
membuat fungsi initialize(). Fungsi ini menampilkan peta Google Maps pada tag
div dengan id map_canvas. Masalahnya adalah, peta tidak akan muncul jika fungsi
ini tidak dipanggil. Maka, fungsi ini akan dipangil pada event onload, ketika
semua object sudah siap, termasuk JavaScript Google Maps API sudah terdownload
sepenihnya oleh browser. Pemanggilan tersebut terjadi pada baris ini:
<body
onload="initialize()">
Interaksi dengan peta
Interaksi dengan peta
Google Maps API bisa dilakukan dengan beberapa cara, diantaranya dengan method-method seperti: setCenter(), panTo()
dan zoomIn().
Selain method, Google
Maps API juga mendukung event listener. Penjelasan tentang method dan event
tidak akan diberikan dalam ebook ini, tetapi Anda langsung dapat melihat
bagaimana cara kerja dan fungsinya melalui code snippet-code snippet yang ada
di bagian berikutnya.
Tidak ada komentar:
Posting Komentar