Cara Membuat Animasi Pada Marker Google Maps

Marker dalam google maps dapat diberi animasi bounch , yaitu animasi bergerak ke atas - ke bawah secara otomatis.

Demo Animasi Satu Demo Animasi Dua Demo Animasi Tiga

<!DOCTYPE html>
<html>
  <head>
  <title>Java Sc Developer - MAPS</title>
    <style type="text/css">
      html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      }
      #map {
      height: 100%;
      }
    </style>
  </head>
    <script type="text/javascript">
    var map , penanda;
    var posisi = {lat: 0.4677041, lng: 101.3565166};
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: posisi,
    zoom: 16,
  });
      penanda = new google.maps.Marker({
          position: posisi,
          map: map,
          animation: google.maps.Animation.BOUNCE,
          title: 'Simple Marker - java-sc.blogspot.com'
      });
}
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
    </script>
  <body>
    <div id="map"></div>
  </body>
</html>

Yang membuat animasi pada marker terletak pada baris 27

animation: google.maps.Animation.BOUNCE

Efek bounce juga dapat kita tampilkan dengan cara memberikan event click pada marker , berikut kode program yang harus ditambah pada bagian script.

penanda.addListener('click', toggleBounce);
      function toggleBounce() {
        if (penanda.getAnimation() !== null) {
          penanda.setAnimation(null);
        } else {
          penanda.setAnimation(google.maps.Animation.BOUNCE);
        }
      }

Dan secara utuh dengan penambahan event click seperti berikut.

<!DOCTYPE html>
<html>
  <head>
  <title>Java Sc Developer - MAPS</title>
    <style type="text/css">
      html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      }
      #map {
      height: 100%;
      }
    </style>
  </head>
    <script type="text/javascript">
    var map , penanda;
    var posisi = {lat: 0.4677041, lng: 101.3565166};
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: posisi,
    zoom: 16,
  });
      penanda = new google.maps.Marker({
          position: posisi,
          map: map,
          title: 'Simple Marker - java-sc.blogspot.com'
      });
      penanda.addListener('click', toggleBounce);
      function toggleBounce() {
        if (penanda.getAnimation() !== null) {
          penanda.setAnimation(null);
        } else {
          penanda.setAnimation(google.maps.Animation.BOUNCE);
        }
      }
}
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
    </script>
  <body>
    <div id="map"></div>
  </body>
</html>

Dibwah ini adalah kode program dari contoh ketiga diatas.

<!DOCTYPE html>
<html>
  <head>
  <title>Java Sc Developer - MAPS</title>
    <style type="text/css">
      html, body {
        width: 600px;
      height: 400px;
      margin: 0 auto ;
      padding: 0;
      }
      h1 {
        text-align: center;
        text-transform: uppercase;
      }
      p {
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
      }
      button {
        background-color: #1d98e0;
        text-align: center;
        color: #fff;
        padding: 8px;
        border-radius: 10px;
      }
      #map {
      height: 100%;
      }

    </style>
  </head>
    <script type="text/javascript">
    var map;
    var penanda = [];
    var posisi = {lat:0.512574, lng:  101.448355};
function initMap() {
 map = new google.maps.Map(document.getElementById('map'), {
   center: posisi,
   zoom: 13,
 });
      function tambah() {
      var sw = map.getBounds().getSouthWest();
      var ne = map.getBounds().getNorthEast();
      for (var i = 0; i < 5; i++) {
        setTimeout(function() {
          var lat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
          var lng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
          penanda.push(new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,
            animation: google.maps.Animation.DROP
          }));
        }, i * 200);
      }
    }
    document.getElementById("tambah").onclick = tambah;
    document.getElementById("animasi").onclick = function() {
      for (var i = 0; i < penanda.length; i++) {
        penanda[i].setAnimation(google.maps.Animation.BOUNCE);
      }
    };
    document.getElementById("berhenti").onclick = function() {
      for (var i = 0; i < penanda.length; i++) {
        penanda[i].setAnimation(null);
      }
    };
    google.maps.event.addListenerOnce(map, 'tilesloaded', tambah);
  }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
    </script>
  <body>
  <h1>Membuat Animasi Pada Marker Google Maps</h1>
  <p>Java Source Code</p>
    <div id="map"></div>
    <p style="margin-top: 5px">
  <button id="tambah">Tambah Marker</button>
  <button id="animasi">Event Bounce</button>
  <button id="berhenti">Stop</button>
</p>
  </body>
</html>

var penanda = [];

Adalah baris kode penambahan variabel penanda dengan tipe array.

function tambah() {
      var sw = map.getBounds().getSouthWest();
      var ne = map.getBounds().getNorthEast();
      for (var i = 0; i < 5; i++) {
        setTimeout(function() {
          var lat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
          var lng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
          penanda.push(new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,
            animation: google.maps.Animation.DROP
          }));
        }, i * 200);
      }
    }

Adalah fungsi untuk menambahkan marker secara random , dimana

var sw = map.getBounds().getSouthWest();var ne = map.getBounds().getNorthEast();

Merupakan variabel yang menampung data maps yang diambil berdasarkan arah mata angin.

var lat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();var lng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();

Merupakan variabel posisi latitude dan logitude yang menampung data lokasi berdasarkan nilai random.

document.getElementById("tambah").onclick = tambah;

adalah script yang mengambil intruksi berdasarkan elemen html yang miliki id dengan nilai tambah.

]document.getElementById("animasi").onclick = function() {
      for (var i = 0; i < penanda.length; i++) {
        penanda[i].setAnimation(google.maps.Animation.BOUNCE);
      }
    };

Adalah script untuk memberikan intruksi event animasi pada tombol dengan id = animasi.

document.getElementById("berhenti").onclick = function() {
      for (var i = 0; i < penanda.length; i++) {
        penanda[i].setAnimation(null);
      }
    };

Adalah script untuk memberikan intruksi berhenti saat tombol button dengan id berhenti di klik.

Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

Keep Learning and Keep Sharing

Emoticon