Selain konten dari website yang berkualitas, website dengan tampilan animasi yang baik dan menarik akan lebih membuat pengunjung betah berlama-lama di website anda. Ketika digunakan dengan benar, animasi dapat memberikan kesan hidup dan interaktif.

Pada artikel sebelumnya sudah dibahas tentang pembuatan marker pada Google Map API, kali ini kita akan mencoba untuk membuat animasi dari marker yang telah dibuat. Untuk membuat animasi pada marker kita bisa menggunakan method setAnimation dari google API.

Animation Contants

Google menyediakan 2 jenis animasi yaitu:

1. Bounce
2. Drop

Penggunaan

Untuk menambahkan animasi pada marker, kita hanya perlu menambahkan 1 baris kode pada options marker.

animation: google.maps.Animation.DROP,

Untuk memilih tipe bounce gunakan google.maps.Animation.BOUNCE

marker = new google.maps.Marker({
    position: new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude
    map: map,
    animation: google.maps.Animation.DROP,
    title: 'Bandung'
});

Menambahkan animasi ketika Marker diklik

Kita juga bisa menambahkan animasi pada marker ketika di klik. Pertama, buat fungsi callback untuk event click pada marker.

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Kemudian tambahkan event listener click pada marker

marker.addListener('click', toggleBounce);

Kode Lengkap

var marker;
function initialize() {
  var options = {
    center:new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude bandung
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP // Tipe ROADMAP
  };
  // create map object
  var map=new google.maps.Map(document.getElementById("googleMap"),options);
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(-6.9147444,107.6098111), // longitude latitude
    map: map,
    animation: google.maps.Animation.DROP,
    title: 'Bandung'
  });
  marker.addListener('click', toggleBounce);
}
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
// membuat Event Listener untuk memanggil fungsi initialize pada saat halaman selesai di load
google.maps.event.addDomListener(window, 'load', initialize);

Demo URL

• https://demo.lab-informatika.com/google-map/

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S