<!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.