ISB Atma Luhur Pangkalpinang

MEMBUAT ANIMASI MARKER GOOGLE MAP API

animasi marker
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 ;

<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: ‘http://1.bp.blogspot.com/-siYF3xcaezY/VHiPhz1phRI/AAAAAAAABME/JyAUux0QpSY/s1600/barber.png’
});

5. Animasi akan aktif ketika marker di klik (sesuai perintah “google.maps.event.addListener(marker, ‘click’, toggleBounce);” )

Demikian yang dapat saya share, semoga dapat bermanfaat dan selamat mencoba…


Christian/1211500091/SIG/GASAL/2015/2015

sumber : http://magenta-map.blogspot.co.id/2014/11/membuat-animasi-marker-google-map-api.html

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *