Pemrograman

Bahasa

Framework

Peralatan

Info

Tutorial Google Maps API - Pembuatan Marker untuk Menandai Lokasi

– 26 June 2016

Marker berfungsi sebagai penanda sebuah lokasi atau titik dalam peta. Pada kesempatan ini, kita akan coba membuat sebuah marker di Google Maps. Anda bisa menggunakan contoh kode sebelumnya untuk uji coba.

Objek Marker

Seperti halnya peta, marker juga merupakan sebuah objek yang dapat dibuat dengan kode berikut ini.
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-8.5830695,116.3202515),
    map: peta
});
Pada kode pembuatan marker di atas, terdapat dua properti penting yaitu position dan map. Properti position berfungsi untuk menentukan titik atau posisi marker pada peta. Sementara itu, properti map berfungsi untuk meletakkan marker pada peta. Karena sebelumnya kita sudah membuat objek peta, maka kita tinggal menggunakan saja.

Kode Lengkapnya:
JS Bin on jsbin.com

Hasil output:
JS Bin on jsbin.com

Animasi Marker

Animasi marker dapat dibuat dengan menambahkan properti animation, contoh:
var marker=new google.maps.Marker({
    position: new google.maps.LatLng(-8.5830695,116.3202515),
    map: peta,
    animation: google.maps.Animation.BOUNCE
});
Maka akan menghasilkan:
JS Bin on jsbin.com

Kostum Ikon

Kita bisa mengganti ikon bawaan marker sesui dengan selera kita. Gunakan properti icon dengan nilai alamat URL gambar ikon. Contoh:
var marker=new google.maps.Marker({
    position: new google.maps.LatLng(-8.623592, 116.222123),
    map: peta,
    icon: "http://www.petanikode.com/favicon.ico"
});
Format ikon tidak harus '.ico', format gambar seperti jpg, png, dan gif juga diterima. Kode diatas akan menghasilkan output:
JS Bin on jsbin.com

Taruh Marker ketika Peta Diklik

Bagaimana kalau, marker dibuat ketika peta diklik? Hal ini dapat dilakukan dengan menambahkan event listerner pada peta. Kemudian memanggil fungsi pembuat marker. Sebelumnya kita buat dulu fungsi pembuat marker bernama taruhMarker().
function taruhMarker(peta, posisiTitik){
    // membuat Marker
    var marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
    });
}
Letakkan fungsi taruhMarker() di atas fungsi initialize(). Kemudian tambahkan event listerner pada fungsi initialize() atau persiapan peta.
google.maps.event.addListener(peta, 'click', function(event) {
    taruhMarker(this, event.latLng);
});
Kode lengkap dan hasil output:
JS Bin on jsbin.com

Taruh Hanya Satu Marker

Hasil output di atas menampilkan lebih dari satu marker. Setiap kali peta diklik, marker akan senantiasa bertambah. Agar hanya ada satu marker saja yang ditaruh di peta, maka kita perlu membuatkan pengecekan kondisi (apakah sudah ada marker atau tidak?) pada fungsi taruhMarker(). Sebelumnya, buatlah objek atau variabel marker menjadi global agar dapat dicek.
var marker;
function taruhMarker(peta, posisiTitik){
    
    if( marker ){
      // pindahkan marker
      marker.setPosition(posisiTitik);
    } else {
      // buat marker baru
      marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
      });
    }
    
}
Kode lengkap dan demo hasil:
JS Bin on jsbin.com

Penutup

Nah!, sekian dulu tutorial ini. Terima kasih sudah membaca. Selemat menunaikan ibadah puasa.

No comments :

Post a Comment