Apa yang kita bisa lakukan dengan Google Maps setelah kita bisa menampilkannya di-website. Wah kalau itu bisa banyak sekali. Fitur dan banyak produk Google lainnya yang bisa di-integrasikan. Dalam tulisan ini kita akan mencoba beberapa fitur yang umum digunakan.

 

Marker

Yang paling umum adalah fitur Marker. Penanda ini memang natularnya hadir untuk aplikasi seperti ini. Peta adalah gambar dan Marker adalah penanda gambar agar lebih bermakna.

Caranya cukup kita buat object Marker dari google.maps.Marker. Ditambahkan lokasi dimana Marker itu akan ditempatkan. Dan yang penting adalah menghubungan Marker dengan object Map lewat property map, dengan begitu Marker tersebut akan bisa di-'gambar' dalam peta.

alt text

Dengan lokasi seperti diatas, maka kita akan mendapatkan Marker seperti dibawah.

alt text

 

Icon

Kadang kita mendapatkan dibeberapa site ada Marker yang bukan standart. Itu sangat dimungkinkan oleh Google Maps. Cukup kita berikan url dari image pada property icon seperti dibawah.

alt text

Seperti yang diharapkan maka muncul Marker dengan gambar yang kita sediakan. Menarik bukan?

alt text

Masih ada banyak setting yang kita bisa gunakan untuk membuat Marker lebih fungsional.

 

InfoWindow

Satu lagi yang biasa kita lihat pada aplikasi peta seperti ini adalah Info Windows. Ini seperti pop up window yang kita bisa tampilkan content.

Sama seperti Marker, yang kita perlu lakukan adalah membuat object dari google.maps.InfoWindow. Yang perlu kita isi adalah property content.

Agar bisa tergambar pada peta, kita cukup gunakan method open. Fungsi ini memerlukan dua object, map dan tujuan object. Contohnya, pada kode dibawah kita membuat event click pada Marker yang isinya penggunaan method open. Tujuan object adalah Marker-nya.

alt text

Pada saat kita mengklik icon codepolitan, maka muncul Info Windows dengan content-nya.

alt text

 

Content HTML

Ternyata property content itu bisa berupa html. Mari kita coba memasukkan iframe kedalam content.

alt text

Wah bisa isi macam-macam ini, dari stream multimedia atau lainnya.

alt text

 

Bercerita

Dengan Marker dan Info Windows saja kita bisa membuat story board atau permainan. seperti pada gambar dibawah. Kita taruh satu atau lebih Marker dengan Info Windows yang isinya bisa dari url atau dari bot.

alt text

Tentu tidak menarik kalau tidak bisa bergerak. Bagaimana kalau kita hidupkan property draggable dengan begitu kita bisa nenempatkan posisi 'aktor' kita di peta.

alt text

Dari gambar diatas, kita bisa menggerakkan secara manual atau dengan kode(JavaScript) dengan animasi mungkin(?).

alt text

Atau kita bisa buat interaksi komik yang di-screenshoot dengan latar belakang peta. Ayo yang punya ide komik perang atau stategi perang mana karyanya.

alt text

 

Penutup

Google Maps memiliki banyak fitur dan produk yang siap di-integrasikan disana. Walaupun begitu yang paling penting adalah kekreatifitasan kita menggunakan elemen-elemen yang ada didalamnya.

 

Sumber : https://www.codepolitan.com/bermain-dengan-google-map-element-59996432a4a0b

Bingung tentang sourcecode atau pemrograman yang ingin dipelajari? TANYA DI SINI
Bingung cari modul, soal, pembahasan mata kuliah? CARI DI SINI