PERTEMUAN 11

MEMBANGUN WEB-BASED GIS DENGAN

GOOGLE MAPS API
 What is a Google Map?
Maps.google.com - interactive street, satellite, terrain maps and more.
 What is Google Maps?
An enormous amount of searchable geographic information (gazetteer)
A way of organizing the worlds information geographically
 What is a Google Map?
Google MyMaps – customize maps with user created enhancements.
WHAT IS GOOGLE MAPS - SUMMARY
A web mapping service, free for non-commercial use that contains:
 Detailed global basemaps: streets, satellite imagery, and terrain.
 Useful services such as address and place locating by searching against an
information rich gazetteer.
 Ability to overlay a wide variety of map layers, (weather, traffic) from static or
dynamic sources.
 Map layer creation and light customization through functionality through MyMaps.
 An API that allows for embedding and extensive customization.
APPLICATION PROGRAMMING INTERFACE (API)
API - An interface to a software program that allows users to
interact and customize it.
 Determines the vocabulary and calling conventions a programmer uses
to employ the software services.
 Usually based on an existing programming languages (C, .NET,
VisualBasic, Java, javascript)
 Many desktop and web software applications have API’s
 Google Maps API uses javascript
GOOGLE MAPS API
Allows embedding of a Google map into one’s own web page
using javascript.

Free to use, on any website that is provided free of charge to

others.
Relatively gentle learning curve.
Highly customizable and easily transferrable.
Evolving - new functionality consistently being added.
DASAR PEMROGRAMAN WEB GIS DENGAN
GOOGLE
Sistem Informasi Geografis (Geographic Information System) merupakan sebuah
aplikasi yang mampu mengolah, menyimpan dan menyajikan data yang memiliki
informasi spasial atau berbasis keruangan. Misalnya data yang berupa lokasi
bangunan, luas lahan, rute, dll.
GIS dapat dimanfaatkan dalam berbagai bidang, a.l penunjang pengambilan
keputusan perencanaan dan pengelolaan penggunaan lahan, sumber daya alam,
lingkungan, transportasi, fasilitas kota dan pelayanan umum lainya.
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
Misalnya anda tersesat di suatu tempat pada peta datar. Bagaimana cara anda
tahu dimana lokasi anda? Katakanlah ada seorang teman memberitahu anda bahwa
anda berada 5.52 KM dari Malioboro. Apakah anda tau sekarang anda berada
dimana? Meskipun belum jelas, tapi anda tahu anda berjarak 5.52 kilometer dari
Malioboro, walaupun anda belum tahu arah selatan barat timur atau utara dari
Malioboro.
Gambarlah lingkaran dengan skala 1:100 di peta dengan titik Maliboro berada di
tengah tengah lingkaran tersebut dengan jari-jari skala dari 5.52 km.
Selanjutnya bayangkan ada satu lagi teman anda yang memberi tahu lokasi anda
berada 10 KM dari Monumen Jogja Kembali. Gambar satu lagi lingkaran dengan
cara yang sama namun kali ini titik tengah berada di Monjali dengan jari-jari
lingkaran skala dari 10KM.
Apakah anda tahu dimana lokasi anda sekarang? belum? coba perhatikan kedua
lingkaran yang kita buat, apakah bertemu pada titik tertentu? ya kedua lingkaran
tersebut berpotongan di dua lokasi. Nah salah satu dari titik perpotongan lingkaran
ini adalah lokasi anda.
Tapi bagaimana cara kita mengetahui lokasi yang mana yang merupakan lokasi kita
sebenarnya? nah disinilah peran acuan ketiga. Sekarang umpamakan ada satu lagi
teman anda memberi tahu lokasi keberadaan anda adalah 10.44 KM dari Bandara.
Sekarang gambarlah lingkaran ketiga dengan metode yang sama dengan kedua
lingkaran sebelumnya dengan titik pusat lingkaran berada di Bandara dan jari-jari
lingkaran adalah skala dari 10.44 KM.
Apakah ketiga lingkaran tersebut berpotongan pada titik yang sama? Jika jarak
yang diberikan oleh ketiga teman anda kita asumsikan tepat, maka anda akan
melihat ketiga lingkaran tersebut bertemu di suatu titik yang sama. Nah inilah lokasi
anda.
Penjelasan di atas merupakan prinsip kerja dari trilateration, yang mana dapat
menentukan lokasi suatu titik dengan bantuan tiga titik yang telah diketahui yaitu
Malioboro, Monjali dan Bandara, serta jarak masing-masing titik ini ke lokasi
keberadaan anda.
Nah prinsip dasar inilah yang kemudian diterapkan pada penentuan lokasi anda di
permukaan bumi oleh GPS. Satelit GPS berperan sebagai 'teman' anda yang
memberitahu jarak anda dengan satelit tersebut. Dan seperti kasus di atas, anda
juga membutuhkan setidaknya 3 atau lebih satelit yang mengetahui atau dapat
dijangkau oleh penerima GPS atau GPS receiver milik anda.
Setidaknya ada 24 satelit yang mengelilingi bumi untuk dapat memenuhi syarat agar
minimal 4 Satelit dapat dijangkau dari setiap tempat di permukaan bumi pada
setiap saat.
DASAR PEMROGRAMAN WEB GIS DENGAN
GOOGLE MAP
CONTOH 1 – MENAMPILKAN PETA (GEOCODING)
CONTOH 2 – MENAMBAHKAN MARKER (DYNAMIC MAP)
CONTOH 3 – MENGGUNAKAN GM API KEY
Menampilkan kota Depok di file HTML (localhost) pada tag div berukuran 600 pixel
x 600 pixel. Bagaimana melakukannya?
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-property pada peta.
4. Menuliskan fungsi JavaScript untuk membuat objek peta.
5. Meng-inisiasi peta dalam tag body HTML dengan event onload.
CARA MEMPEROLEH GOOGLE MAPS API KEY
Perhatikan potongan script pada contoh 1 di atas

Kode yang dicetak 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 di alamat https://developers.google.com/maps/signup?csw=1
Setelah mendaftar, termasuk memberikan alamat website Anda, Google akan memberi Anda
sebuah API key. Bentuknya kurang lebih seperti ini (tentu saja milik Anda nantinya akan
berbeda):
ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0od
NPtk8VLkdrQF5grA
Key yang digunakan di atas digunakan untuk komputer local (untuk localhost). Jadi,
jika Anda ingin mencoba menulis program untuk dijalankan di komputer Anda sendiri,
sementara Anda bisa pakai key ini. Nanti kalau program sudah siap, baru perlu
mendaftar sendiri API key Anda, kemudian dipakai menggantikan API key contoh ini.
MENAMBAHKAN FUNGSI KLIK KANAN PADA PETA
Kita telah mengenal GIS dan mencoba membuat web gis sederhana untuk
menampilkan titik-titik koordinat tertentu di google map.
Selanjutnya kita dapat menambahkan fungsi tambahan pada web agar user dapat
menambahkan titik tertentu di peta dengan melakukan klik kanan pada peta
tersebut.
Marker yang baru
ditambahkan
Berdasarkan contoh sebelumnya, tambahkan baris berikut di paling bawah sebelum
tutup tag </script>
Selanjutnya kita perlu memanggil fungsi setAction(map); melalui fungsi initialize();
tempatkan baris code setAction(map); di bawah baris setMarkers(map,sites);
REFERENSI GIS MENGGUNAKAN PHP
1. http://jagocoding.com/tutorial/1131/Meletakkan_Marker_di_Google_Maps
2. http://jagocoding.com/tutorial/904/Mendeteksi_Lokasi_dengan_HTML5_Geoloc
ation
3. http://jagocoding.com/tutorial/865/Bermain_dengan_Marker_Google_Maps_A
PI
4. http://jagocoding.com/tutorial/845/Menampilkan_Google_Maps_V3_pada_hal
aman_website
5. http://jagocoding.com/tutorial/122/Memasang_Google_Map_pada_Website