Membuat animasi marker pada google map

alfa6661
- December 18, 2015
0 (0 votes)
Rate :
Cara menambahkan animasi marker pada google map

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

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

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article