Cara Menambahkan Icon Marker pada Google Maps

Siapa yang tidak tahu Google Maps ?. Google maps merupakan salah satu penyedia peta digital yang bersifat free yang termasuk sering digunakan oleh developer web ataupun developer mobile.

Pada tutorial web kali ini kita akan mempelajari bagian sederhana dari google maps, yaitu : bagaimana caranya memanggil google maps dari sebuah website. Dan pada google maps tersebut terdapat icon marker untuk menandai sebuah lokasi, jadi begitu icon marker tersebut diklik maka akan menyajikan sebuah informasi tertentu.

Berikut ini adalah output atau hasil akhir dari tutorial penambahan icon marker pada google maps seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

(Gambar.1)

Langkah-langkah membuat icon marker pada Google Map

1. Memanggil API Google Maps Server
Supaya website kita dapat terhubung ke google map server, sertakan script berikut pada web anda :

<script 
 src="http://maps.google.com/maps/api/js?sensor=trueorfalse">
</script

Pada bagian kode sensor=trueorfalse bertujuan untuk memberikan pilihan kepada user apakah lokasi ditentukan oleh google atau ditentukan sendiri oleh si user (developer).

Karena dalam tutorial ini kita akan membuat sendiri lokasinya, maka untuk parameter sensor diset : false, sehingga kodenya menjadi :

<script 
 src="http://maps.google.com/maps/api/js?sensor=false">
</script

2.Set posisi kordinat lokasi (latitude dan longtitude)
Untuk menyatakan lokasi pada sebuah peta ditentukan oleh kordinat garis lintang (latitude) dan kordinat garis bujur (longtitude).

Dengan demikian kita harus mengetahui kordinat darilokasi yang akan kita tambahkan icon marker. Untuk itu silahkah buka url :https://www.google.co.id/maps, lalu klik lokasi/posisi yang diinginkan, kemudian copy kordinatnya dan letakkan pada bagian latitude dan longtitude pada script berikut :

var  position = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

Jadi kalau seandaianya kita memiliki kordinat latitude dan longtitude ( 5.550176, 95.319263), maka scriptnya menjadi :

var position = new google.maps.LatLng(5.550176, 95.319263)

3. Menambahkan properti pada objek map option

var myOptions = {
 zoom: 8,
 center: position,
 mapTypeId: google.maps.MapTypeId.ROADMAP
};

Terdapat banyak properti untuk mengatur map option, namun dalam tutorial ini kita hanya memerlukan tiga properti saja:

• center: objek google.maps.LatLng (lebih lanjut tentang ini nanti) digunakan untuk mengatur pusat peta awal.
• mapTypeId: objek google.maps.MapTypeId.ROADMAP menyatakan jenis peta yang digunakan adalah ROADMAP (normal, default 2D map). Jika kita ingin memilih tipe peta dengan jenis satelit, cukup gantikan ROADMAP dengan SATELLITE. Pilihan jenis peta lain yang dapat digunakan adalah TERRAIN dan HYBRID.
• zoom: angka positif yang menetapkan zoom awal peta (nilai dari 0 s.d 18)

4. Membuat map
Langkah selanjutnya adalah menampilkan peta setelah diset posisi dan properti dari map option:

var map = new google.maps.Map(
 document.getElementById("map_canvas"),
 myOptions);

5. Menambah icon marker
Langkah ke-5 adalah penambahan icon marker pada sebuah posisi kordinat yang telah kita diset (langkah 2) :

var marker = new google.maps.Marker({
 position: position,
 map: map,
 title:"This is the place."
}); 

Kode title:"This is the place." akan tampil ketika menghover pada icon marker tersebut. Kita dapat merubaha isi title-nya dengan kalimat lainnya.

6. Menambahkan informasi ketika icon marker diklik
Ketika icon marker diklik maka akan menampilkan sebuah kalimat yang telah kita tambahkan sebelumnya, seperti script dibawah ini :

var contentString = 'Ibukota<strong> Provinsi Aceh</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});

7. Membuat event click pada marker
Ketika proses klik terjadi pada icon marker maka perlu sebuah fungsi yang menangani event click tersebut. Kemudian event click tersebut akan mebangkitkan informasi dari marker tersebut dimana informasi tersebut terdapat dalam variabel infowindow (lihat langkah 6).

google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map,marker);     
});

Full Source Code untuk membuat marker pada Google Map

Dalam ujicoba penggunaan marker google maps kali ini, kita akan membuat marker untuk lokasi kota Banda Aceh. Saat marker tersebut diklik, maka akan muncul informasi "Ibukota Provinsi Aceh" seperti Gambar.1 diatas :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Load Map </title>
 <!-- Bagian css -->
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/informatika.css">
 
 <!-- Bagian js -->
 <script src='assets/js/jquery-1.10.1.min.js'></script>       
    
 <script src="assets/js/bootstrap.min.js"></script>
 <!-- akhir dari Bagian js -->
 <script 
  src="http://maps.google.com/maps/api/js?sensor=false">
 </script>
 <script>
  function initialize() {
  var position = new google.maps.LatLng(5.550176, 95.319263);
     
  var myOptions = {
    zoom: 8,
    center: position,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  var map = new google.maps.Map(
   document.getElementById("map_canvas"),
   myOptions);

  var marker = new google.maps.Marker({
   position: position,
   map: map,
   title:"This is the place."
  });  

  var contentString = 'Ibukota<strong> Provinsi Aceh</strong>!';
  var infowindow = new google.maps.InfoWindow({
   content: contentString
  });
  

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    
  });

   }
 </script>
</head>
<body onload="initialize()">
<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Dunia Informatika</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="">Programming</a></li>
    <li class="clr3"><a href="">English</a></li>
   </ul>
  </div>
 </div>
</nav>
</br></br></br></br>
<!--- Bagian Judul--> 
<div class="container" style="margin-top:10px"> 

 <div class="row">
  <div class="col-md-8">
   <div class="panel panel-default">
    <div class="panel-heading">Marker Google Maps</div>
     <div class="panel-body">
      <div id="map_canvas" style="width:700px; height:500px"></div>
     </div>
   </div>
  </div> 
 </div>
</div> 
</body>
</html>

Live Preview Download