MODUL IV

Penginputan lokasi (Marker) dan Manipulasi graph (Pemotongan Garis)

A. Tujuan

1. Mampu membuat sistem penginputan lokasi dan menampilkan marker lokasi

menggunakan google maps API.

2. Mampu memahami implementasi graph dalam penggambaran polyline

menggunakan google maps API.

3. Mampu memanipulasi graph atau melakukan pemotongan garis berdasarkan

inputan lokasi

B. Teori Dasar

Marker mengidentifikasi lokasi pada peta. Secara default, marker

menggunakan gambar standar. Marker bisa menampilkan gambar khusus, dalam hal

ini maka biasanya disebut "ikon". Marker dan ikon adalah objek bertipe Marker. Anda

bisa menyetel ikon khusus dalam konstruktor marker, atau dengan

memanggil setIcon() pada marker.

Umumnya, marker bertipe overlay. Untuk informasi tentang tipe overlay. Marker

didesain agar interaktif. Misalnya, secara default marker menerima kejadian 'click',

sehingga Anda bisa menambahkan event listener untuk memunculkan jendela

 info yang menampilkan informasi khusus. Anda bisa diperbolehkan pengguna

memindah marker pada peta dengan menyetel properti draggable marker ke true.

Menambahkan marker

Konstruktor google.maps.Marker mengambil literal objek Marker options tunggal,

yang menetapkan properti awal marker.

Bidang-bidang berikut sangat penting dan biasanya disetel saat membuat marker:

• position (diperlukan) menetapkan LatLng yang mengidentifikasi lokasi awal marker.

Salah satu cara untuk mengambil LatLng adalah dengan menggunakan layanan

Geocoding.

• map (opsional) menetapkan Map untuk menempatkan marker. Jika Anda tidak

menetapkan peta saat pembuatan marker, marker akan dibuat namun tidak dilekatkan

pada (atau ditampilkan pada) peta. Anda bisa menambahkan marker belakangan

dengan memanggil metode setMap().

C. Praktikum

1. Pembuatan database

a. Buatlah sebuah database dengan nama gis2

b. Buatlah tabel dengan nama lokasimarker_gis2

c. Buatlah struktur tabel lokasimarker_gis2 sebagai berikut :

d. Buatlah tabel dengan nama koordinatawal

e. Buatlah struktur tabel koordinatawal sebagai berikut :

2. Pembuatan sistem penyimpanan simpul awal

a. Buka editor (sublime, notepad++, dll)

b. Buatlah file index.html, Ketikan kode program berikut :

c. Buatlah file koneksi.php, Ketikan kode program berikut :

d. Buatlah file simpankoordinatawal.php, Ketikan kode program berikut :

3. Pembuatan sistem penginputan data lokasi dan manipulasi graph (pemotogan

garis)

a. Buka editor (sublime, notepad++, dll)

b. Buatlah file index.html, Ketikan kode program berikut :

c. Buatlah file style.css, Ketikan script berikut :
d. Buatlah file koneksi.php, Ketikan kode program berikut :
e. Buatlah file tampilmarker.php, Ketikan kode program berikut :

f. Buatlah file maps.js, Ketikan kode program berikut :

g. Buatlah file titikpermeter.php, Ketikan kode program berikut :

h. Buatlah file simpulbaru.php, Ketikan kode program berikut :

 i. Buatlah file simpan.php, Ketikan kode program berikut :

4. Menyimpan koordinat simpul yang ada dalam tabel polyline (Simpul dan garis

yang sudah digambar pada modul2)

a. Pilih button gambar garis

b. Jumlah “Koordinat awal tersimpan” akan tampil sesuai jumlah simpul yang

tersimpan
 5. Menginput data lokasi dan melakukan pemotongan garis

a. Inputkan data nama (nama tempat), alamat, latitude dan longitude

b. Marker lokasi yang diinputkan telah tersimpan dalam database dan akan

tampil pada peta serta telah dilakukan pemotogan garis (untuk melihat garis

telah terpotong atau belum, lihat menggunakan sistem untuk menampilkan

garis pada modul2)

D. HASIL PERCOBAAN

1. Hasil tabel koordinatawal setelah melakukan penyimpanan koordinat simpul

2. Hasil tabel lokasimarker_gis2

3. Hasil input data lokasi

Zoom out

Zoom in
4. Hasil tabel koordinatawal setelah manipulasi garis/graph (terdapat tambahan

record)

5. Hasil tabel polyline_gis2

a. Sebelum manipulasi garis/graph

 b. Sesudah manipulasi garis (graph)

6. Hasil tampilan manipulasi garis/graph (lihat menggunakan sistem untuk

menampilkan garis pada modul2)

a. Sebelum manipulasi garis/graph

b. Sesudah manipulasi garis/graph

Zoom out

Zoom in
E. TUGAS

1. Tambahkan informasi latitude dan longitude pada lokasi marker