Menambahkan Marker Pada Google Map

AUTHOR

Apa itu Marker?

Marker adalah penanda berupa titik. Marker umumnya digunakan untuk menandakan lokasi-lokasi tertentu yang ingin ditampilkan kepada pengguna. Pada posting sebelumnya sudah dibahas cara menambahkan polyline dan polygon pada Google Map. Posting kali ini akan dijelaskan cara menambahkan marker pada google map.

Menambahkan Marker

Pada Google Maps API versi 3, marker dibuat dengan menginisiasi objek marker dengan syntax new.google.maps.Marker(). Struktur syntax secara lengkap adalah sebagai berikut:

 marker=new google.maps.Marker({Opsi marker (Posisi, icon, Click, dll)});

Kode di bawah adalah contoh lengkap untuk menampilkan sebuah marker. Hasil running dari kode ini dapat dilihat pada gambar 1.

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script type="text/javascript">
    function initialize() {
    var mapOptions = {
    center: new google.maps.LatLng(4.027433,97.267278),
    zoom: 8
    };           
var map = new google.maps.Map(document.getElementById("map-canvas"), 

mapOptions);
var lokasi=new google.maps.LatLng(4.027433,97.267278);
var marker=new google.maps.Marker({
    position:lokasi,
    animation:google.maps.Animation.BOUNCE
    });
marker.setMap(map);
    }
google.maps.event.addDomListener(window,'load',initialize);
</script>
</head>
<body>
    <div id="map-canvas" style="width:700px;height:500px" />
</body>
</html>
Download Kode
Tampilan Google Maps dengan Marker
Gambar 1. Tampilan Google Maps dengan Marker

Penjelasan Kode

Pada bagian ini yang menjadi fokus adalah kode bagian

var lokasi=new google.maps.LatLng(4.027433,97.267278);
      var marker=new google.maps.Marker({
      position:lokasi,
      animation:google.maps.Animation.BOUNCE
      });
marker.setMap(map);

 1. Pertama kali dibuat sebuah variabel dengan nama lokasi. Variabel ini berupa posisi koordinat dalam lintang dan bujur. Lokasi ini kemudian akan digunakan sebagai posisi marker di atas peta.
2. Inisiasi sebuah marker dengan nama marker. Kemudian diatur pilihan-pilihannya, dalam hal ini berupa posisi dan animasi marker. Selain itu terdapat pilihan-pilihan lainnya yang dapat diatur di antaranya:
  • icon: untuk menentukan gambar marker (string)
  • clickable: untuk membuat marker dapat diklik atau tidak (boolean)
  • dragable: untuk mengatur apakah marker dapat digeser atau tidak (boolean)
  • visible: untuk mengatur marker terlihat atau tidak (boolean)
  • label: untuk menambahkan label pada marker (string)
  • opacity: untuk mengatur transparansi, dengan nilai 0-1 (number)
3. Marker ditambahkan di atas peta dengan metode setMap().

Demikianlah penjelasan bagaimana menambahkan marker pada google map. Semoga bermanfaat. Anda dapat mempelajari lebih lanjut tentang google maps API di situs Google Develper.

Related Posts

Disqus Comments