author Ahmad Muhardian

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi


Belajar Google Maps API

Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan dalam membuat aplikasi Geolocation.

Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan melakukan beberapa modifikasi.

Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba.

Sudah siap?

Mari kita mulai…

Mengenal Objek Marker

Marker merupakan sebuah objek yang bisa kita buat dengan kode berikut:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-8.5830695,116.3202515),
    map: peta
});

Terdapat dua properti penting yang harus diberikan ke marker:

  1. position adalah posisi koordinat latitude dan longitude marker pada peta.
  2. map objek dari peta (Google Map).

Contoh:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tutorial Google Map - Petani Kode</title>
  
  <script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    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(-8.5830695,116.3202515),
      map: peta
  });

}

// event jendela di-load  
google.maps.event.addDomListener(window, 'load', initialize);
</script>
  
</head>
<body>

  <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Hasilnya:

Membuat marker pada peta Google Maps

Live Demo: http://jsbin.com/raluzez/7/embed?output

Animasi Marker

Selain dua properti wajib, ada juga properti opsional seperti animation untuk membuat animasi pada marker.

Contoh:

var marker=new google.maps.Marker({
    position: new google.maps.LatLng(-8.5830695,116.3202515),
    map: peta,
    animation: google.maps.Animation.BOUNCE
});

Kita memberikan nilai google.maps.Animation.BOUNCE terhadap properti animation. Artinya, animasi yang kita inginkan adalah berupa pentalan (bounce).

Contoh kode lengkapnya:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tutorial Google Map - Petani Kode</title>
  
  <script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    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(-8.5830695,116.3202515),
      map: peta,
      animation: google.maps.Animation.BOUNCE
  });

}

// event jendela di-load  
google.maps.event.addDomListener(window, 'load', initialize);
</script>
  
</head>
<body>

  <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Hasilnya:

Animasi marker

Live demo: http://jsbin.com/raluzez/8/embed

Selain animasi BOUNCE ada juga DROP (google.maps.Animation.DROP).

Kustom Ikon

Apabila kita tidak ingin menggunakan ikon bawaan dari marker yang berwarna merah. kita bisa membuat kustom ikon sendiri dengan properti icon.

Ikon Google maps

Nilai dari properti icon dapat berupa URL dari gambar ikon yang akan digunakan.

Format ikon tidak harus .ico, format gambar seperti jpg, png, dan gif juga diterima.

Contoh:

var marker=new google.maps.Marker({
    position: new google.maps.LatLng(-8.623592, 116.222123),
    map: peta,
    icon: "https://developers.google.com/maps/documentation/javascript/examples/full/img/beachflag.png"
});

Contoh lengkap:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tutorial Google Map - Petani Kode</title>
  
  <script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    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(-8.623592, 116.222123),
      map: peta,
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/img/beachflag.png"
  });

}

// event jendela di-load  
google.maps.event.addDomListener(window, 'load', initialize);
</script>
  
</head>
<body>

  <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Hasilnya:

demo kustom ikon marker

Live demo: http://jsbin.com/menoyixine/1/edit?output

Pastikan menggunakan ukuran ikon 32x32 pixel agar terlihat bagus.

Membuat Marker Saat Peta diklik

Bagaimana kalau kita ingin membuat marker ketika peta diklik?

Hal ini dapat dilakukan dengan menambahkan event listerner klik pada peta. Lalu memanggil fungsi untuk membuat marker.

Contoh fungsi untuk membuat marker:

function taruhMarker(peta, posisiTitik){
    // membuat Marker
    var marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
    });
}

Lalu fungsi tersebut kita panggil saat event peta diklik:

google.maps.event.addListener(peta, 'click', function(event) {
    taruhMarker(this, event.latLng);
});

Fungsi taruhMarker() membutuhkan dua parameter, yaitu: peta dan posisiTitik agar bisa membuat marker.

Pada contoh di atas, kita memberikan this untuk objek peta dan event.latLng untuk posisi marker.

Kenapa menggunakan this?

Karena fungsi tersebut dipanggil di dalam event peta dan this sudah mewakili objek dari peta.

Contoh kode lengkapnya:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tutorial Google Map - Petani Kode</title>
  
  <script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
  
function taruhMarker(peta, posisiTitik){
    // membuat Marker
    var marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
    });
}
  
function initialize() {
  var propertiPeta = {
    center:new google.maps.LatLng(-8.5830695,116.3202515),
    zoom:9,
    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) {
    taruhMarker(this, event.latLng);
  });

}


// event jendela di-load  
google.maps.event.addDomListener(window, 'load', initialize);
  

</script>
  
</head>
<body>

  <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Hasilnya:

Demo membuat marker saat peta diklik

Live demo: http://jsbin.com/raluzez/12/embed?html,output

Membuat Hanya Satu Marker

Bagaimana kalau kita ingin membuat hanya satu marker saja ketika petanya diklik?

Kita harus melakukan mdofikasi terhadap fungsi taruhMarker() seperti ini:

var marker;
function taruhMarker(peta, posisiTitik){
    
    if( marker ){
      // pindahkan marker
      marker.setPosition(posisiTitik);
    } else {
      // buat marker baru
      marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
      });
    }
    
}

Objek atau variabel marker kita taruh di luar fungsi agar menjadi variabel global.

Lalu di dalam fungsi taruhMarker() kita melakukan pengecekan dengan IF/ELSE.

if(marker){
  //...
} else {
  //...
}

Jika ada marker di peta, maka cukup pindahkan posisinya saja. Tapi kalau belum ada, maka buat yang baru.

Untuk memindahkan posisi marker, kita cukup memanggil method setPosition() dengan parameter koordinat yang baru:

marker.setPosition(posisiTitik);

Contoh kode lengkapnya:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tutorial Google Map - Petani Kode</title>
  
  <script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
// variabel global marker
var marker;
  
function taruhMarker(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(-8.5830695,116.3202515),
    zoom:9,
    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) {
    taruhMarker(this, event.latLng);
  });

}


// event jendela di-load  
google.maps.event.addDomListener(window, 'load', initialize);
  

</script>
  
</head>
<body>

  <div id="googleMap" style="width:100%;height:380px;"></div>
  
</body>
</html>

Hasilnya:

Demo membuat marker saat peta diklik

Live demo: http://jsbin.com/raluzez/14/embed?html,output

Bagaimana Cara Mengambil Titik Koordinat dari Marker?

Pertanyaan bagus.

Mengambil titik koordinat dari marker biasnya kita butuhkan saat membuat form input. Lalu nilai koordinat tersebut dikirim ke database.

Kita bisa mengambil nilai koordinat dari marker dari dalam fungsi taruhMarker() atau saat event peta diklik.

Contoh:

function taruhMarker(peta, posisiTitik){
    
    if( marker ){
      // pindahkan marker
      marker.setPosition(posisiTitik);
    } else {
      // buat marker baru
      marker = new google.maps.Marker({
        position: posisiTitik,
        map: peta
      });
    }

    console.log("Posisi marker: " + posisiTitik);
    
}

Kode di ata akan menampilkan koordinat posisi dari marker ke console.

Posisi marker saat peta diklik

Lalu bagaimana agar nilai dari koordinat tersebut kita taruh di dalam form?

Kita bisa memanfaatkan DOM untuk mengirim nilai tersebut ke from.

Contoh kode form-nya:

<form action="" method="post">
    <input type="text" id="lat" name="lat" value="">
    <input type="text" id="lng" name="lng" value="">
</form>

Lalu pada fungsi taruhMarker() kita berikan nilai untuk elemen tersebut.

function taruhMarker(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();
    
}

Kode lengkap:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Tutorial Google Map - Petani Kode</title>
  
  <script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
// variabel global marker
var marker;
  
function taruhMarker(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(-8.5830695,116.3202515),
    zoom:9,
    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) {
    taruhMarker(this, event.latLng);
  });

}


// event jendela di-load  
google.maps.event.addDomListener(window, 'load', initialize);
  

</script>
  
</head>
<body>

  <div id="googleMap" style="width:100%;height:380px;"></div>
  
  <form action="" method="post">
    <input type="text" id="lat" name="lat" value="">
    <input type="text" id="lng" name="lng" value="">
  </form>
  
</body>
</html>

Hasilnya:

Demo posisi marker saat peta diklik

Live demo: http://jsbin.com/wevahox/3/edit?output

Nah kalau sudah nilai koordinatnya ada di form, kita tinggal kirim saja ke database.

Selain menggunakan input type=“text”, kita juga bisa menggunakan hidden.

<form action="" method="post">
    <input type="hidden" id="lat" name="lat" value="">
    <input type="hidden" id="lng" name="lng" value="">
</form>

Apa Selanjutnya?

Kita sudah belajar cara membuat marker pada Google Maps. Selanjutnya kamu bisa belajar tentang cara membuat info window.

Selamat belajar. 😉

Baca Juga ini

Belajar Javascript: Apa itu DOM API? dan Bagaimana Cara Menggunakanya?

Belajar Javascript: Apa itu DOM API? dan Bagaimana Cara Menggunakanya?

Saat kamu memutuskan akan belajar Javascript, maka wajib hukumnya memahami tentang DOM. DOM merupakan metode yang digunakan oleh Javascript untuk...

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Cara Parsing XML di Python dengan DOM API

Cara Parsing XML di Python dengan DOM API

Python memungkinkan kita melakukan parsing (penguraian) dan manipulasi terhadap file XML dengan DOM API. DOM (Document Object Model) adalah sebuah API yang menyediakan fungsi-fungsi untuk memanipulasi dokumen. Salah satu modul DOM yang dapat kita gunakan untuk parsing XML adalah MiniDOM. Pada kesempatan ini kita akan belajar cara parsing file XML dan HTML menggunakan MiniDom. Apa saja yang akan kita pelajari? Cara Parsing XML di Python Cara Membuat Node/Elemen Mari kita mulai…

Tutorial Google Maps API: Menampilkan Peta Google Map di dalam Web

Tutorial Google Maps API: Menampilkan Peta Google Map di dalam Web

Google Maps merupakan produk Google yang memungkinkan kita melihat peta dari seluruh dunia. Bahkan tidak hanya peta, Google Maps juga menyediakan Citra dari beberapa lokasi bangunan, jalan, dan lain-lain. Apa itu Google Maps API?Google Menyediakan Google Maps API yang memungkinkan kita membangun aplikasi dengan memanfaatkan Google Maps. Google Maps API (Application Programming Interface) merupakan sebuah API yang disediakan oleh Google untuk menggunakan peta Google (Google Map) dalam aplikasi yang kita bangun.

Cara Menggunakan highlight.js di Blogger

Cara Menggunakan highlight.js di Blogger

Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.

Belajar PHP: Memahami 4 Jenis Perulangan dalam Pemrograman PHP

Belajar PHP: Memahami 4 Jenis Perulangan dalam Pemrograman PHP

Perulangan adalah hal dasar yang harus dipelajari dalam pemrograman PHP. Pada artikel ini, kita akan belajar jenis perulangan di PHP.