Salam buat semua jagocoders, meneruskan tutorial mengenai Google Maps kali ini saya akan mengajarkan tentang Marker Google Maps.
Marker adalah salah satu penanda lokasi berbentuk icon atau pin atau juga image. Marker bisa kita rubah dengan image dari kita atau menggunakan default dari google maps. Hal yang kita bisa lakukan dengan marker salah satunya adalah menambahkan animasi, membuat marker bisa di drag, menghapus dan lain-lainnya.
Tidak perlu lama-lama penjelasannya, mari langsung kita coba.
Jika masih ingat dengan tutorial pertama saya, persiapannya masih sama kita hanya perlu mengimport Javascript API dari Google Maps. Dan masih sama, di tutorial kali ini kita hanya perlu menggunakan text editor, saya menggunakan Sublime Text.
Bermain dengan Event pada Markers
Ya, Google Maps punya banyak sekali Event. Click, mouse over, drag dan event-event lainnya.
Kali ini mari kita coba dengan event click, dimana kita akan menambahkan markers ketika kita melakukan click pada maps.
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
Kita tambahkan script ini pada tag <script>. Penjelasan script diatas adalah kita buat sebuah fungsi placeMarker, sama prinsipnya dengan menampilkan marker pada tutorial pertama. namun perbedaannya adalah kita mentriggernya dengan menggunakan event click. Disini kita mempassing parameter location, yaitu LatLang dari posisi map yang kita click.
Animation pada Markers
Kita bisa membuat animasi pada markers, ada dua jenis animation yang bisa kita gunakan pada markers, yaitu DROP dan juga BOUNCE. Untuk menambahkan animasi, kita perlu menambahkan animation ke dalam marker kita. Dengan berisi google.maps.Animation.DROP dan google.maps.Animation.BOUNCE
var marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
Dengan begitu, maka ketika kita menambahkan marker kedalam peta akan ada animasi dari markernya. Sekarang mari kita buat efek animasi lagi, kali ini animasi akan muncul ketika icon dari marker di click. Kali ini kita buat event listener di dalam function placeMarker sehingga setiap marker bisa di click untuk memunculkan animasi.
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
map: map
});
google.maps.event.addListener(marker, 'click', function(event) {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
});
}
Penjelasannya, kita menambahkan animasi DROP ketika kita menambahkan marker. Kemudian ketika kita click icon markernya, jika tidak ada animasi maka kita beri animasi BOUNCE, sedangkan jika animasi tidak kosong, atau ada, maka kita buat tidak ada animasi. Cukup sederhana bukan?
Custom Icon Markers
Yang terakhir, yang akan saya ajarkan adalah bagaimana merubah icon dari markers. agar bentuknya tidak seperti default. Caranya sangatlah mudah, tinggal tambahkan icon pada markers:
var marker = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: 'assets/markers_32.png',
map: map
});
Disini terserah anda untuk menggunakan icon/image apa, dengan catatan bahwa icon markernya harus berukuran kecil. Dalam kasus ini saya menggunakan icon dengan dimensi 32x32 dan diletakan di dalam folder assets.
Full Source Code
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 500px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var marker;
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(-6.402484, 106.794243),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: 'assets/markers_32.png',
map: map
});
google.maps.event.addListener(marker, 'click', function(event) {
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>
.Ya sekian dahulu tutorial kali ini, bermain-main dengan markers. Semoga kalian bisa explore lebih lagi. Semoga tutorial ini bermanfaat buat kita semua. Terima kasih. Sampai jumpa di tutorial berikutnya.
