BAB II LANDASAN TEORI
II.4. Google Maps
II.4.1. Pengenalan Google Maps
Google Maps adalah sebuah jasa peta globe virtual gratis
dan online yang disediakan oleh Google dan dapat ditemukan di
merupakan hasil komunikasi dengan database pada web server
Google untuk menampilkan gabungan dari potongan-potongan
gambar yang diminta. Keseluruhan citra yang ada diintegrasikan ke
dalam database pada Google Server, yang nantinya akan dapat
dipanggil sesuai kebutuhan permintaan. Bagian-bagian gambar
map merupakan gabungan dari potongan gambar-gambar bertipe
PNG yang disebut tile yang berukuran 256 x 256 pixel seperti
gambar berikut.
Gambar 2.2 Pembagian Gambar Peta Sebesar 256 x 256 pixel
Melalui fitur Google Maps, pengguna internet dapat
browsing informasi grafis berikut:
1. Satellite Map
Pengguna dapat menikmati gambar satelit planet bumi.
Pengguna juga dapat menikmati foto satelit lebih detail lengkap
Gambar 2.3Satellite Map
2. Hasil Pencarian Integrasi
Mencari lokasi, bisnis, peta buatan pengguna dan real estate.
3. Draggable Maps
Peta digital mapping yg dragable (bisa digeser) dengan
bantuan mouse.
4. Terrain Maps (Peta Topografi)
Terrain Maps menyediakan informasi fitur peta fisik atau peta
Gambar 2.4Terain Map
5. Earth Map
Earth Map menyediakan informasi peta bumi dimana akan
tampak bumi secara utuh dan bila di-zoom akan terlihat awan
yang menyelimuti bumi beserta pulau dan lautan yang tampak
nyata dari ketinggian.
6. My Location
Dengan fitur ini pengguna dapat mengetahui letak dimana
lokasi dari pengguna tersebut.
II.4.2. Google Maps API
Google Maps API adalah suatu library yang berbentuk
JavaScript. Cara membuat Google Maps untuk ditampilkan pada
suatu web atau blog sangat mudah hanya dengan membutuhkan
pengetahuan mengenai HTML serta JavaScript, serta koneksi
internet yang sangat stabil. Dengan menggunakan GoogleMaps
API, kita dapat menghemat waktu dan biaya untuk membangun
aplikasi peta digital yang handal, sehingga kita dapat fokus hanya
pada data-data yang akan ditampilkan. Dengan kata lain, kita
hanya membuat suatu data sedangkan peta yang akan ditampilkan
adalah milik Google sehingga kita tidak dipusingkan dengan
membuat peta suatu lokasi, bahkan dunia.
Dalam pembutan program Google Maps API menggunakan
urutan sebagai berikut:
1. Memasukkan Maps API JavaScript ke dalam HTML.
2. Membuat element div untuk menampilkan peta.
3. Membuat beberapa objek literal untuk menyimpan
properti-properti pada peta.
5. Menginisiasi peta dalam tag body HTML dengan event onload.
Kode program dasar:
Gambar 2.6 Kode Program Dasar Google Maps API
Pada Google Maps API terdapat 4 jenis pilihan model peta
yang disediakan oleh Google, diantaranyaa dalah:
1. ROADMAP, untuk menampilkan peta 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.
tergambar pula apa yang tampil pada ROADMAP (jalan dan
nama kota).
II.4.3. Integrasi PHP/MySQL dengan Google Maps API
Berikut ini adalah langkah-langkah pembuatan Sistem
Informasi Geografis Menggunakan PHP, MySQL, dan Google
Maps API :
1. Membuat Tabel
Dalam membuat tabel, yang harus diperhatikan adalah
atribut yang berisi informasi latitude dan longitude. Dengan
kemampuan zoom yang dimiliki Google Maps, hanya
diperlukan 6 digit presisi setelah desimal. Untuk menjaga ruang
penyimpanan pada tabel agar minimal, tipe dari atribut yang
berisi informasi latitude dan longitude tersebut diharuskan
menggunakan tipe float dengan size (10,6). Dengan tipe ini,
field dapat menyimpan 6 digit setelah desimal ditambah hingga
4 digit sebelum desimal, misalnya -123,456789derajat.
2. Membuat file PHP untuk keluaran XML
Jika tabel telah dibuat dan telah diisi data, maka perlu
melakukan penulisan perintah php untuk mengekspor data ke
dalam format XML yang dapat diambil oleh peta melalui
asynchronous JavaScript. Dengan menggunakan file XML
sebagai perantara antara database dengan Google Maps, maka
akan mempercepat proses dalam membuka halaman awal web
yang berisi peta. Selain itu, aplikasi peta akan lebih fleksibel
dan mudah dalam proses debugging.
Pada file PHP untuk keluaran XML ini digunakan
fungsi DOM. DOM (Document Object Model) adalah sebuah
API untuk dokumen HTML dan XML. Dengan DOM, setiap
bagian dari XML dianggap sebagai sebuah node, baik elemen
maupun atribut XML tersebut. DOM adalah cara akses
dokumen XML karena dengan DOM, berkas teks XML dapat
dirubah menjadi representasi yang lebih abstrak sebagai
kumpulan simpul dari struktur data pohon. Penerapan DOM
memiliki keunggulan dalam melakukan manipulasi dokumen
XML. Keunggulan itu adalah kemampuan untuk melakukan
pengaksesan secara acak terhadap elemen-elemen yang
terdapat pada dokumen XML. Sedangkan kelemahan DOM
adalah penggunaan memory yang lebih besar untuk memuat
File PHP ini, pertama akan menginisialisasi sebuah
dokumen XML dan menciptakan parent node dan kemudian
menghubungkan ke database. Untuk setiap baris dalam tabel
(setiap lokasi), akan dibuat sebuah node XML baru dengan
atribut baris sebagai atribut XML, dan akan ditambahkan ke
parent node. Kemudian dump XML ke layar.
Berikut ini adalah contoh script PHP untuk membuat
keluaran XML :
Untuk memeriksa apakah file PHP untuk membuat keluaran
XML tersebut berjalan dan hasilnya valid, panggil file PHP
tersebut dari browser. Contoh keluaran XML dapat dilihat pada
Gambar 2.9 berikut :
Gambar 2.9 Contoh Hasil Keluaran XML
3. Membuat function untuk mengambil data hasil keluaran XML
yang akan digunakan untuk membuat marker pada peta.
4. Membuat peta
Setelah XML bekerja dengan baik di browser, peta dapat
segera dibuat dengan javaScripts. Berikut ini merupakan
langkah-langkah dalam pembuatan peta :
Memasukkan Maps API JavaScript ke dalam HTML
Gambar 2.11 Maps API JavaScript
Membuat element div untuk menampilkan peta
Besar ukuran peta harus disesuaikan dengan besar ukuran
halaman web. Cara menampilkan peta dapat dilihat pada
Gambar 2.12 berikut :
Gambar 2.12 Element Div untuk Menampilkan Peta
Membuat beberapa objek literal untuk menyimpan
properti-properti pada peta (properti-properti-properti-properti peta diantaranya
adalah titik tengah peta, angka perbesaran tampilan peta,
Gambar 2.13 Objek Literal untuk Menyimpan Properti-Properti Peta
Menginisiasi peta dalam tag body HTML dengan event
onload
Gambar 2.14 Event Onload
Loading file XML
Setelah dibuat script PHP untuk membuat keluaran XML,
File XML harus di-load ke halaman web dengan
memanfaatkan object XMLHTTPREQUEST yang
disediakan browser. Pada javaScript API V2, menyajikan
suatu built-in GDownload URL yang berfungsi untuk
membungkus XMLHTTPREQUEST yang digunakan
untuk request file XML dari server dimana halaman HTML
berada. Berbeda dengan javaScript API V3, pada javaScript
API V3 dirancang dengan lebih ringkas dengan tidak
menyediakan suatu pembungkus seperti javaScript API V2.
Pada javaScript API V3 digunakan fungsi downloadURL()
yaitu :
a. URL, menetapkan path PHP script. Pada umumnya file
ini terletak pada direktori yang sama dengan file
HTML, sehingga hanya perlu menuliskan nama filenya
saja.
b. Callback, menandai adanya fungsi tersebut ketika
XML dikembalikan ke javaScript.
Deklarasi fungsi tersebut dapat dilihat pada Gambar 2.15
berikut :
Gambar 2.15 Deklarasi Fungsi downloadURL()
Membuat marker dan info window
Untuk membuat marker, digunakan fungsi
createMarker(). Dalam fungsi createMarker,
menciptakan LatLng dan menambahkan event listener
untuk marker sehingga ketika diklik dapat
memunculkan info window yang menampilkan
createMarker dapat dilihat pada Gambar 2.16 berikut :
Gambar 2.16 Fungsi createMarker()
Untuk mencari lokasi dalam dalam jarak radius tertentu
dari longitude dan latitude tertentu, dapat menggunakan perintah
SELECT berdasarkan rumus Haversine. Rumus Haversine
digunakan umumnya untuk menghitung jarak antara dua pasang
koordinat pada sebuah bola. Berikut adalah contoh pernyataan SQL
yang akan menemukan 20 lokasi terdekat yang berada dalam radius
25 mil ke 37, -122 koordinat. Untuk mencari berdasarkan
kilometer, 3959 diganti dengan 6371. Tetapan 3959 digunakan
untuk mencari berdasarkan mil.
Gambar 2.17 Contoh Penggunaan Rumus Haversine