MEMBUAT ANIMASI MARKER GOOGLE MAP API
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 ;
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