Membuat Animasi Marker Google Map API ~ Pemetaan & GIS

Animasi marker google maps

Halo guys,, kalo postingan sebelumnya sudah dibahas tentang pembuatan marker beserta kustomisasinya pada Google Map API, kali ini mari kita coba untuk membuat animasi dari marker yang telah dibuat.

Sebenarnya dari segi substansi, pembuatan animasi tidak memiliki fungsi yang begitu vital. Namun dalam dunia kartografi, visualisasi peta tidak boleh diabaikan begitu saja. Keindahan pada layout peta, seni untuk menyajikan setiap detil komponen peta juga perlu diperhatikan. Karena pada dasarnya kartografi juga bagian dari seni (art), dalam membuat peta. Berikut caranya ;

1. Siapkan program text editor untuk meletakkan script berikut ;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker Animations</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>

var jogja = new google.maps.LatLng(-7.8730414,110.424874);

var marker;
var map;
function initialize() {
  var mapOptions = {
    zoom: 10,
    center: jogja
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

  marker = new google.maps.Marker({
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: jogja
  });
  google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {

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

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

2. Simpan dengan format *.html
3. Buka file *.html tadi menggunakan browser favorit kalian
4. Jika ingin merubah marker, bisa juga edit script dengan menambahkan url icon seperti di bawah ;

marker = new google.maps.Marker({

map:map,

draggable:true,

animation: google.maps.Animation.DROP,

position: jogja,

icon: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfrRYdrgv_6TElKWf_jKtn_dxGMziCyUD8xSNc2KLb_c3_6ECf4JZgob2fX0pUms0uItTq6cGfPoSY_YamX_-Hh228KEzXAkBGhzMaWUwMBSRw_vEfwsxlb1eVBptvgfslqw3hcmv1rs/s1600/barber.png'

});

5. Animasi akan aktif ketika marker di klik (sesuai perintah "google.maps.event.addListener(marker, 'click', toggleBounce);" )

Demikian yang dapat ane share, semoga dapat bermanfaat dan selamat mencoba...

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Pemetaan & GIS

Membuat Animasi Marker Google Map API

About Admin

Related Post