Contents
Pada tutorial sebelumnya, Menampilkan Google Maps di Web dengan Javascript, kita telah belajar bagaimana menampilkan peta online Google Map (gmap) ke dalam web. Berikutnya kita akan cobabeajar bagaimana menampilkan marker (bisa dikatakan sebuah penunjuk) khusus untuk titik koordinat tertentu. Marker ini sangat berguna untuk menunjukkan koordinat suatu objek tertentu dalam GMap, khususnya untuk aplikasi berbasis lokasi (Location Based System) seperti GPS tracking, Asset Traking Management, dll. Dengan mengetahui titik posisi dari suatu objek secara visua, aplikasi web kita menjadi lebih menarik dan interaktif.
Untuk menampilkan marker dalam Google Maps menggunakan javascript caranya cukup mudah. Bahkan Anda bisa mengganti ikonnya sendiri (ikon marker default berupa marker warna merah), menampilkannya secara animatif, mengisi informasi jika marker diklik dan lain-lain sesuai imajinasi Anda.
Kode Javascript Menampilkan Marker di Google Map
Untuk menampilkan marker di Google Maps dengan Javascript, cukup dengan menciptakan sebuah instance dari class google.maps.Marker. Di dalam class ini tersedia beberapa parameter yang dibutuhkan untuk mendefinisikan bagaimana marker nanti ditampilkan. Contoh sintaks paing basic-nya adalah sebagai berikut :
marker = new google.maps.Marker({
position: {lat: -6.917464, lng: 107.619123},
map: map,
});
Sekarang coba kita praktekkan ke dalam file html yang sebelumnya sudah kita buat pada tutorial sebelumnya. Perhatikan bahwa deklarasi instance marker ini harus di bawah instance ‘map’ sebagai induknya (ya iyalah, mau ditaruh dimana markernya jika ngga ada petanya he he). Perhatikan bahwa dalam mendeklarasikan sebuah marker, minimal harus ada parameter ‘position’ seperti pada contoh di atas. Berikut ini adalah contoh script html lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Peta Gmaps Sederhana</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnjlDXASsyIUKAd1QANakIHIM8jjWWyNU"
type="text/javascript"></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.917464, lng: 107.619123},
zoom: 8
});
marker = new google.maps.Marker({
position: {lat: -6.917464, lng: 107.619123},
map: map,
//animation:google.maps.Animation.BOUNCE,
//icon:'images/tower_on.png',
//title:"Ini markerku",
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Simpan source code di atas dengan nama ‘gmap2.html’ di folder C:/xampp/htdocs/tutorial. Jika belum instal XAMPP silahkan instal dulu ya, gratis kok. Kemudian buka web browser kesayangan Anda, dan buka peta onine GMaps Anda di ‘http://localhost/tutorial/gmap2.html’
Tampilan Marker di Google Map dengan Javascript
Animasi Marker di Peta Google Maps
Sekarang kita akan coba meng-advanced tampilan marker kita dengan menambahkan parameter ‘title’, animation dan icon. Dari nama parameter ini kita sudah dapat mengira-ngira fungsinya bukan? Ya, parameter ‘title’ adalah untuk menampilkan judul (atau free text) jika mouse mengenai marker (hover), parameter ‘animation’ adalah untuk menampilkan animasi sederhana terhadap tampilan marker, sedangkan parameter ‘icon’ adalah untuk mengganti tampilan icon default sesuai keinginan kita. Berikut ini adalah contohnya:
marker = new google.maps.Marker({
position: {lat: -6.917464, lng: 107.619123},
map: map,
animation:google.maps.Animation.BOUNCE,
icon:'images/tower_on.png',
title:"Ini markerku",
});
Dengan penambahan sedikit kode di atas, tampilannya akan berubah sebagai berikut:
Yang perlu Anda perhatikan adalah saat mengganti icon default dengan icon custom milik Anda. Jangan lupa untuk menempatkan file gambar icon di folder yang sesuai dengan Anda panggil dalam deklarasi parameter ‘icon’ di atas. Nama file icon juga ngga boleh salah ya, kalo ngga ntar icon-nya tidak bisa ganti. Ohya, atur ukuran pixel file icon juga ya, agar tidak terlalu besar atau kekecilan. Sebagai contoh, tampilan icon marker di atas menggunakan ukuran 32×32 pixel.
Demikian sedikit tutorial kali ini, pada tutorial berikutnya akan saya sampaikan bagaimana menampilkan info window saat marker diklik/ditekan.
a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com