GOOGLE MAPS API

Mochammad Aditya RachmanKadek Indra SentanaWidhi Mahardika

Memulai Google Maps API

Untuk menggunakan google maps api pada website sederhana yang kita buat , langkah pertama yang perlu dilakukan adalah memasukkan Google Maps API key-nya terlebih dahulu. Berikut Contoh web sederhana yang menggunakan Google Maps API.

Mengaktifkan Google Maps APIMasuk ke dalam website

code.google.comMengaktifkan API di menu

Service, klik beberapa status service yang perlu diaktifkan google API Key-nya.

Mendapatkan Google API Key di menu API Access.

Google Maps API sederhana

Google Maps API sederhana

Berikut merupakan Kodingan dari Google Maps API sederhana:

Google Maps API sederhana

Pada Kodingan tersebut terbagi beberapa bagian, bagian pertama yang kami jelaskan adalah cara menghubungkan canvas yang kita buat. Dengan menggunakan API dari google, caranya hanya cukup dengan mengetikan atau meng-copy API Key yang kita punya dari code.google.com tadi. Berikut Kodingan Jelasnya:

Pada kodingan diatas, kita hanya perlu memasukkan Key-nya, pada bagian yang diblok. Dan kita men-set sensornya hanya pada satu kondisi, yaitu true atau false saja.

Google Maps API sederhana

Setelah kita dapat mengakses API Key yang kita punya, kini kita dapat membuat Google Maps API yang kita ingin buat, kali ini kita buat Goole Maps API yang sederhana, berikut tampilan dari kodingan utamanya:

Berikut Klasifikasi dari kodingan tersebut:• Pada baris 16, kita membuat fungsi initialize, dimana

fungsi ini berisi dari opsi pengaturan Google Maps yang kita buat itu sendiri.

• Pada baris 17, kita membuat Variable mapOptions, yang berisi dari opsi Maps yang kita buat. Terdiri dari, Langitude dan Latitude awal. Zoom, seberapa dekat kita membuat peta tersebut, zoom disini juga merupakan zoom awal. Tipe Map yang kita gunakan, ini ditujukan pada baris 20.

• Pada baris 22, kita membuat variable map, yang mana variable ini fungsinya menghubungkan dengan canvas yang dibuat pada baris 29.

• Setelah semua fungsi ditulis, maka kita perlu menjalankan fungsi initialize tersebut, dan pada baris ke 25, kita mengaktifkan fungsi initialize tersebut

Marker

MarkerPada gambar disamping ini merupakan kodingan dari cara membuat Marker pada map yang kita buat. Marker disini memiliki aksi atau event, yaitu melakukan Zoom, dan apabila kita melakukan perpindahan lokasi, maka otomatis dalam 3 detik map akan kembali pada posisi awal dimana Marker tersebut berada.

MarkerBerikut merupakan klasifikasi dari kodingan utama yang kami buat.

• Pada Bagian Awal seperti biasa kita membuat fungsi initialize.

• Lalu kita membuat variable mapOption, dan map, yang mana disini fungsinya sama seperti slide sebelumnya.

• Pada baris 24, kita membuat maker pada peta yang kita buat. Awalnya kita menginisialisasi marker tersebut, seperti yang tertera pada baris 24, lalu bagaimana letak marker tersebut berikut judul marker tersebut, kita dapat melihat pada baris 25 hingga 27.

• Pada slide 9 dijelaskan, bahwa pada marker yang kita buat mempunyai 2 buah event. Berikut event yang kita buat. Untuk membuat event, terhadap marker yang kita buat, kita hanya perlu menambahkan addListener lalu di-inisialisasi-kan, fungsi seperti apa yang akan kita gunakan, kali ini kita menggunakan ‘center changed’, maka fungsinya akan terlihat pada baris 33, yaitu dengan menset waktu yang perlu kita buat, kita menset waktunya 3 detik, maka interval waktu yang digunakan adalah 3000, seperti yang tertera pada baris 35.

• Event yang kedua, terletak pada baris 38, merupakan event zoom, maka jika marker diklik, akan melakukan zoom sebesar 6 kali lebih dekat, ini ditulis pada baris 39, sedangkan baris 40 menerangkan jika zoom dilakukan maka posisi marker akan berada ditengah peta.

Picker

PickerPada gambar disamping ini merupakan kodingan dari cara manentukan Latitude dan Longitude suatu tempat berdasarkan marker yang kita buat, jadi ketika kita mendrag marker yang kita buat. Maka, otomatis kita dapat mengetahui longitude dan latitude tempat tersebut.

Picker

Tampilan koding diatas merupakan tampilan koding html yang nantinya akan menampilkan, map, dan latitude juga longitude-nya. Latitude dan Longitude itu sendiri nantinya akan dicetak kedalam textfield. Untuk lebih jelasnya gambar tampilan ada di sebelah kanan.

PickerBerikut merupakan penjelasan dari kodingan utama:

• Pada baris 28, kita akan melakukan pengambilan nilai Latitude dan Longitude yang nantinya akan merubah value pada textfield yang sudah kita buat.

• Pada baris 33 kita membuat variable map yang difungsikan sebagai optional maps itu sendiri, mencetak tampilan awal petanya, dengan men-set latitude longitude, zoom, dan tipe mapnya.

• Pada baris 39, kita membuat variable latLng, yang mana difungsikan sebagai posisi marker awalnya ditempelkan pada baris 43, sehingga dicetak pada baris 29 dan 30.

• Pada baris 42, kita membuat marker, yang mana posisi pada baris 43 ditentukan dari variable 43. Dan seterusnya sama seperti fungsi sebelum-sebelumnya, menambahkan judul marker. Namun kali ini kira mengaktifakan fungsi draggable pada marker, dengan men-set true.

• Pada baris 49, kita akan meng-update latitude dan longitude ketika marker dipindahkan.

• Pada baris sebelumnya, kita telah mengaktifkan fungsi draggable, namun disini kita membuat fungsi drag itu sendiri, sehingga ketika di drag marker-nya maka posisi akan berubah, ini diambil dari fungsi yang ada pada baris 52.