Hallo sobat mitra tekno niaga, pada tulisan kali ini Kami ingin memberikan tutorial tentang bagaiamana cara membuat marker untuk menandai lokasi pada peta Google Maps. Tanpa panjang lebar lagi, Yuk mari baca dan simak tulisan ini sampai habis. Di jamin akan memberikan manfaat yang besar untuk menambah pengetahuan Anda. Oke, langsung saja ya.
Marker merupakan sebuah objek yang bisa Anda buat dengan kode script sebagai berikut:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-6.209339, 106.847446),
map: peta
});Ada 2 properti yang wajib Anda gunakan dalam objek marker yaitu:
Berikut ini adalah contoh script standar yang bisa Anda gunakan untuk menampilkan marker pada peta Google Maps.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript">
function initialize() {
var propertiPeta = {
center: new google.maps.LatLng(-1.605328,117.451067),
zoom: 5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
// membuat Marker
var marker=new google.maps.Marker({
position: new google.maps.LatLng(-6.209339, 106.847446),
map: peta
});
}
</script>
</head>
<body>
<div id="googleMap" style="width:1100px;height:500px;"></div>
</body>
</html>Bila script tersebut dijalankan, maka akan menghasilkan output seperti gambar dibawah ini:
Pada Google Maps, Anda bisa memberikan efek animasi pada objek marker dengan properti animation. Pada properti animasi ini ada 2 jenis efek animasi yang bisa Anda gunakan yaitu:
google.maps.Animation.DROP, efek animasi ini terlihat pada saat halaman peta di refresh atau di reload. Marker akan muncul dari atas peta dan jatuh ke bawah tepat pada titik marker.google.maps.Animation.BOUNCE, efek animasi ini membuat marker menjadi menarik perhatian, karena terlihat bergerak ke atas dan ke bawah seperti sebuah suspensi atau bola yang di benturkan ke tanah.Bagaimana cara menggunakannya? Berikut ini contoh script yang bisa Anda gunakan untuk menampilkan marker dengan Animasi-animasi tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript">
function initialize() {
var propertiPeta = {
center: new google.maps.LatLng(-1.605328,117.451067),
zoom: 5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
// membuat Marker
var marker=new google.maps.Marker({
position: new google.maps.LatLng(-6.209339, 106.847446),
map: peta,
// Properti Animasi
animation: google.maps.Animation.DROP
});
}
</script>
</head>
<body>
<div id="googleMap" style="width:1100px;height:500px;"></div>
</body>
</html>Contoh script di atas menggunakan marker dengan efek animasi DROP dan menghasilkan output seperti gambar di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript">
function initialize() {
var propertiPeta = {
center: new google.maps.LatLng(-1.605328,117.451067),
zoom: 5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
// membuat Marker
var marker=new google.maps.Marker({
position: new google.maps.LatLng(-6.209339, 106.847446),
map: peta,
// Properti Animasi
animation: google.maps.Animation.BOUNCE
});
}
</script>
</head>
<body>
<div id="googleMap" style="width:1100px;height:500px;"></div>
</body>
</html>Contoh script di atas menggunakan marker dengan efek animasi BOUNCE dan menghasilkan output seperti gambar di bawah ini:
Apakah ikon default marker Google Maps bisa di ganti sesuai dengan keinginan? Tentu saja bisa, untuk mengganti ikon marker Anda bisa menggunakan properti icon dari objek marker. Lalu gambar atau logo dengan extention apa saja yang bisa digunakan? extention gambar yang di dukung untuk mengubah ikon marker Google Maps antara lain: .ico, .jpg, .png, .gif dan lain-lain. Apakah ada batasan size atau ukuran untuk custom ikon marker ini? Tidak ada, namun idealnya untuk ukuran ikon marker 32x32 pixel. Berikut ini adalah contoh script untuk mengubah ikon marker pada peta Google Maps:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript">
function initialize() {
var propertiPeta = {
center: new google.maps.LatLng(-1.605328,117.451067),
zoom: 5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
// membuat Marker
var marker=new google.maps.Marker({
position: new google.maps.LatLng(-6.209339, 106.847446),
map: peta,
icon: "https://www.mitrateknoniaga.com/content/uploads/migration/2020/01/flag-marker.png"
});
}
</script>
</head>
<body>
<div id="googleMap" style="width:1100px;height:500px;"></div>
</body>
</html>Bila script tersebut dijalankan, maka akan menghasilkan output seperti gambar dibawah ini:
Bagaimana cara membuat marker berdasarkan klik pada peta? Hal ini dapat dilakukan dengan cara membuat fungsi untuk membuat marker, lalu menambahkan event listerner klik pada peta Google Maps. Berikut ini adalah contoh fungsi untuk membuat marker:
function buatMarker(peta, posisiTitik){
// membuat Marker
var marker = new google.maps.Marker({
position: posisiTitik,
map: peta
});
}Kemudian fungsi tersebut akan di panggil ketika peta di klik, dengan menggunakan script event listener berikut ini:
google.maps.event.addListener(peta, 'click', function(event) {
buatMarker(this, event.latLng);
});Fungsi buatMarker() memiliki 2 parameter yang harus di isi yaitu: peta dan posisiTitik (Latitude & Longitude) agar bisa membuat marker. Pada script event listener di atas, parameter pertama (peta) di isi dengan this karena event listener ini nantinya akan terpanggil di dalam event peta sehingga this sudah mewakili objek dari peta. Selanjutnya, parameter kedua di isi dengan event.latLng yang berisikan titik koordinat Latitude dan Longitude untuk posisi marker. Lihat script lengkapnya di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript">
function buatMarker(peta, posisiTitik){
// membuat Marker
var marker = new google.maps.Marker({
position: posisiTitik,
map: peta
});
}
function initialize() {
var propertiPeta = {
center: new google.maps.LatLng(-1.605328,117.451067),
zoom: 5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
// even listner ketika peta diklik
google.maps.event.addListener(peta, 'click', function(event) {
buatMarker(this, event.latLng);
});
}
</script>
</head>
<body>
<div id="googleMap" style="width:1100px;height:500px;"></div>
</body>
</html>Bila script tersebut dijalankan, maka akan menghasilkan output seperti gambar dibawah ini:
Bagaimana cara membuat hanya satu marker saja ketika peta di klik? Anda cukup memodifikasi fungsi buatMarker() menjadi seperti berikut ini:
// variabel global marker
var marker;
function buatMarker(peta, posisiTitik){
if( marker ){
// pindahkan marker
marker.setPosition(posisiTitik);
} else {
// buat marker baru
marker = new google.maps.Marker({
position: posisiTitik,
map: peta
});
}
}Modifikasi fungsi buatMarker() di atas yaitu membuat variable global dengan nama marker, kemudian menambahkan kondisi jika ada marker di peta, maka cukup pindahkan posisinya saja. Namun jika belum ada, maka buat marker baru. Untuk memindahkan posisi marker pada peta, Anda cukup memanggil method setPosition() dengan parameter koordinat yang baru. Lihat script lengkapnya di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript">
// variabel global marker
var marker;
function buatMarker(peta, posisiTitik){
if( marker ){
// pindahkan marker
marker.setPosition(posisiTitik);
} else {
// buat marker baru
marker = new google.maps.Marker({
position: posisiTitik,
map: peta
});
}
}
function initialize() {
var propertiPeta = {
center: new google.maps.LatLng(-1.605328,117.451067),
zoom: 5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
// even listner ketika peta diklik
google.maps.event.addListener(peta, 'click', function(event) {
buatMarker(this, event.latLng);
});
}
</script>
</head>
<body>
<div id="googleMap" style="width:1100px;height:500px;"></div>
</body>
</html>Bila script tersebut dijalankan, maka akan menghasilkan output seperti gambar dibawah ini:
Bagaimana cara untuk mengambil titik koordinat Latitude dan Longitude dari marker? Tenang, Kami sudah membuatkan script yang sudah siap Anda gunakan dan bisa langsung Anda Copy Paste ke PC Anda. Lihat script di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript">
// variabel global marker
var marker;
function buatMarker(peta, posisiTitik){
if( marker ){
// pindahkan marker
marker.setPosition(posisiTitik);
} else {
// buat marker baru
marker = new google.maps.Marker({
position: posisiTitik,
map: peta
});
}
// isi nilai koordinat ke form
document.getElementById("lat").value = posisiTitik.lat();
document.getElementById("lng").value = posisiTitik.lng();
}
function initialize() {
var propertiPeta = {
center: new google.maps.LatLng(-1.605328,117.451067),
zoom: 5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
// even listner ketika peta diklik
google.maps.event.addListener(peta, 'click', function(event) {
buatMarker(this, event.latLng);
});
}
</script>
</head>
<body>
<div id="googleMap" style="width:1100px;height:500px;"></div>
<form action="" method="post">
<input type="text" id="lat" name="lat" value="">
<input type="text" id="lng" name="lng" value="">
</form>
</body>
</html>Pada contoh script di atas, Kami membuat 2 buah kolom textbox seperti berikut ini:
<form action="" method="post">
<input type="text" id="lat" name="lat" value="">
<input type="text" id="lng" name="lng" value="">
</form>2 kolom textbox tersebut berfungsi untuk menampung titik koordinat Latitude dan Longitude dari marker. Kemudian Kami juga memodifikasi fungsi buatMarker() dengan menambahkan script berikut ini:
// isi nilai koordinat ke form
document.getElementById("lat").value = posisiTitik.lat();
document.getElementById("lng").value = posisiTitik.lng();Script di atas berfungsi untuk mengisi 2 kolom textbox yang telah Kami buat sebelumnya dengan titik koordinat Latitude dan Longitude. Bila script tersebut dijalankan, maka akan menghasilkan output seperti gambar dibawah ini:
Selesai. Sangat mudah kan?
Demikian pembahasan tentang Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih
