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=ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA"></script>
<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=ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA"></script>
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_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA
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.
Informasi selengkapnya silahkan check disini :
http://www.filefactory.com/file/4g1ujle2zpvn/n/Tutorial-Dasar-Pemrograman-Google-Maps-API.pdf
(^^) Selamat Mencoba ...
https://www.facebook.com/ave.avhe.avee
Tidak ada komentar:
Posting Komentar