Marker dan InfoWindows

Artikel ini adalah bagian ketiga dari pembahasan tentang Google maps API. dalam artikel ini akan dijelaskan secara singkat tentang 2 hal yaitu Marker dan InfoWindow. Marker adalah pin yang di Maps, infoWindows adalah jendela info yang muncul saat pin di klik.

Marker
Untuk menampilkan marker, hal yang perlu diperhatikan, marker harus di deklarasikan setelah variable maps di inisialisasi.

	(function() {
  window.onload = function() {
var map;
    //Parameter Google maps
    var options = {
      zoom: 12, //level zoom
	  //posisi tengah peta
      center: new google.maps.LatLng(-7.8008, 110.380643),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	
	 // Buat peta di div peta
    var map = new google.maps.Map(document.getElementById('peta'), options);
	 /* kode  Tambahkan Marker */
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(-7.793338, 110.407917),
      map: map,
      title: 'STMIK AKAKOM'
    }); 
  /* end kode marker */
   
  };
})();

Hasil dari script diatas harusnya seperti gambar dibawah ini

Custom Marker
Kadang, kita ingin mengganti icon marker dengan icon yang berbeda, misalkan kalau kita ingin membangun GIS tentang data kampus di jogja, kita ingin mengubah ikonnya menjadi gambar icon wisudawan. Cukup ganti skripnya dengan menambahkan parameter icon setelah title, jangan lupa simpan file iconnya di folder yang sama dengan file halaman peta yang anda buat.icon juga bisa langsung diambil dari sembarang file icon di internet, namun saya merekomendasikan icon diletakan satu folder dengan file htmlnya.

 var marker = new google.maps.Marker({
      position: new google.maps.LatLng(-7.793338, 110.407917),
      map: map,
      title: 'STMIK AKAKOM',
	  icon: 'grad-icon.png'
    });

Hasilnya tampak seperti dibawah ini

InfoWindows
Langkah selanjutnya, bagiamana kalau kita ingin menambahkan infoWindows pada marker yang telah kita buat. Berikut ini potongan codenya.

 var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h3 id="firstHeading" class="firstHeading">STMIK AKAKOM</h3>'+
    '<div id="bodyContent">'+
    '<p>Kampus IT Pertama dan utama di Yogyakarta</p>'+
    '<p>Web:  <a href="http://www.akakom.ac.id">'+
    'www.akakom.ac.id</a> .</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

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

Hasilnya tampak seperti gambar dibawah ini

Demo dan source code
Silahkan download source code lengkap dan lihat demonya disini