Official StoreTekan tombol di atas untuk membeli semua alat dan bahan eksperimen di web ini

Membuat Marker di Google Map dengan Javascript

Pada tutorial sebelumnya, Menampilkan Google Maps di Web dengan Javascript, kita telah belajar bagaimana menampilkan peta online Google Map (gmap) ke dalam web. Berikutnya kita akan cobabeajar bagaimana menampilkan marker (bisa dikatakan sebuah penunjuk) khusus untuk titik koordinat tertentu. Marker ini sangat berguna untuk menunjukkan koordinat suatu objek tertentu dalam GMap, khususnya untuk aplikasi berbasis lokasi (Location Based System) seperti GPS tracking, Asset Traking Management, dll. Dengan mengetahui titik posisi dari suatu objek secara visua, aplikasi web kita menjadi lebih menarik dan interaktif.

Untuk menampilkan marker dalam Google Maps menggunakan javascript caranya cukup mudah. Bahkan Anda bisa mengganti ikonnya sendiri (ikon marker default berupa marker warna merah), menampilkannya secara animatif, mengisi informasi jika marker diklik dan lain-lain sesuai imajinasi Anda.

Kode Javascript Menampilkan Marker di Google Map

Untuk menampilkan marker di Google Maps dengan Javascript, cukup dengan menciptakan sebuah instance dari class google.maps.Marker. Di dalam class ini tersedia beberapa parameter yang dibutuhkan untuk mendefinisikan bagaimana marker nanti ditampilkan. Contoh sintaks paing basic-nya adalah sebagai berikut :

Sekarang coba kita praktekkan ke dalam file html yang sebelumnya sudah kita buat pada tutorial sebelumnya. Perhatikan bahwa deklarasi instance marker ini harus di bawah instance ‘map’ sebagai induknya (ya iyalah, mau ditaruh dimana markernya jika ngga ada petanya he he). Perhatikan bahwa dalam mendeklarasikan sebuah marker, minimal harus ada parameter ‘position’ seperti pada contoh di atas. Berikut ini adalah contoh script html lengkapnya:

Simpan source code di atas dengan nama ‘gmap2.html’ di folder C:/xampp/htdocs/tutorial. Jika belum instal XAMPP silahkan instal dulu ya, gratis kok. Kemudian buka web browser kesayangan Anda, dan buka peta onine GMaps Anda di ‘http://localhost/tutorial/gmap2.html’

Tampilan Marker di Google Map dengan Javascript

membuat-marker-di-google-map-dengan-javascript

Animasi Marker di Peta Google Maps

Sekarang kita akan coba meng-advanced tampilan marker kita dengan menambahkan parameter ‘title’, animation dan icon. Dari nama parameter ini kita sudah dapat mengira-ngira fungsinya bukan? Ya, parameter ‘title’ adalah untuk menampilkan judul (atau free text) jika mouse mengenai marker (hover), parameter ‘animation’ adalah untuk menampilkan animasi sederhana terhadap tampilan marker, sedangkan parameter ‘icon’ adalah untuk mengganti tampilan icon default sesuai keinginan kita. Berikut ini adalah contohnya:

Dengan penambahan sedikit kode di atas, tampilannya akan berubah sebagai berikut:

membuat-marker-di-google-map-dengan-javascript-animasi-marker

Yang perlu Anda perhatikan adalah saat mengganti icon default dengan icon custom milik Anda. Jangan lupa untuk menempatkan file gambar icon di folder yang sesuai dengan Anda panggil dalam deklarasi parameter ‘icon’ di atas. Nama file icon juga ngga boleh salah ya, kalo ngga ntar icon-nya tidak bisa ganti. Ohya, atur ukuran pixel file icon juga ya, agar tidak terlalu besar atau kekecilan. Sebagai contoh, tampilan icon marker di atas menggunakan ukuran 32×32 pixel.

Demikian sedikit tutorial kali ini, pada tutorial berikutnya akan saya sampaikan bagaimana menampilkan info window saat marker diklik/ditekan.

Incoming search terms:

deklarasi infowindow

Add a Comment

Your email address will not be published. Required fields are marked *

error: Content is protected !!