Cara Menampilkan Multiple Marker di Google Map

Menampilkan sebuah marker dengan infoWindow sudah kita bahas di materi sebelumnya. Sekarang bagaimana cara menampilkan multiple marker di Google maps?
untuk menampilkan beberapa marker atau bahkan puluhan marker sekaligus, kita harus menampung lokasi dalam array javascript. Untuk memudahkan gambarannya, saya akan memberikan contoh peta untuk menampilkan lokasi beberapa kampus di Yogyakarta.

Kode menampilkan banyak marker di Google maps

(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 
    var map = new google.maps.Map(document.getElementById('peta'), options);
	 // Tambahkan Marker 
     var locations = [
               		    ['STMIK AKAKOM', -7.790085, 110.408465],
                   		['Universitas Gadjah Mada', -7.764147, 110.378939],
                   		['Universitas Muhamadiyah Yogyakarta', -7.810845, 110.324223],
                   		['Univeritas Ahmad Dahlan', -7.819295, 110.387915], 		
    
    ];
	  var infowindow = new google.maps.InfoWindow();

    var marker, i;
     /* kode untuk menampilkan banyak marker */
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
		 icon: 'grad-icon.png'
      });
     /* menambahkan event clik untuk menampikan
     	 infowindows dengan isi sesuai denga
	    marker yang di klik */
		
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  

  };
})();

Tampilan peta

Peta dengan multiple marker dan multiple infoWindows

Demo dan source code
Lihat demonya disini dan download source codenya disini

What next?
Tutorial selanjutnya akan membahas tentang location picker dan teknik menyimpan lokasi ke database MySQL dengan PHP.

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

Tampilan marker di Google maps

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