New!
×Close

Notifications

Disqus Logo
MASIGNCLEAN104

Cara Membuat Animasi Pada Marker Google Maps


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


<!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.
Share This :
Hady Eka Saputra