rachmat

Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta

Google Maps adalah layanan pemetaan web yang dikembangkan oleh Google. Layanan ini memberikan citra satelit, peta jalan, panorama 360°, kondisi lalu lintas, dan perencanaan rute untuk bepergian dengan berjalan kaki, mobil, sepeda motor, sepeda atau angkutan umum.
5
(4)

Hallo sobat, pada tulisan kali ini Saya 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.

Objek Marker Google Maps

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:

  1. position, merupakan posisi atau titik koordinat pada peta yang ingin diberikan marker atau tanda.
  2. map, merupakan objek peta Google Maps.

Cara Membuat Marker pada Google Maps

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:

Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta

Cara Membuat Marker dengan Animasi

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:

  1. 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.
  2. 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.

Marker dengan Animasi DROP
<!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:

Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta
Marker dengan Animasi BOUNCE
<!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:

Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta

Cara Mengganti Ikon Marker Google Maps

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 32×32 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://rachmat.id/content/uploads/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:

Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta

Cara Membuat Marker saat Peta di Klik

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:

Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta

Cara Membuat Satu Marker saat Peta di Klik

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:

Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta

Cara Mengambil Titik Koordinat dari Marker

Bagaimana cara untuk mengambil titik koordinat Latitude dan Longitude dari marker? Tenang, Saya 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, Saya 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 Saya 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 Saya buat sebelumnya dengan titik koordinat Latitude dan Longitude. Bila script tersebut dijalankan, maka akan menghasilkan output seperti gambar dibawah ini:

Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta

Selesai. Sangat mudah kan?

Demikian pembahasan tentang Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta, silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih

Apakah artikel ini membantu Anda?

klik bintang untuk memberikan nilai

Total nilai 5/5 dari 4 suara

Tidak ada suara sejauh ini! Jadilah yang pertama memberi nilai pada tulisan ini.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *