Posted in

Cara Menampilkan Multiple Marker di Google Map

Peta dengan multiple marker dan multiple infoWindows

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.

Share Artikel ini:

Candra Adi Putra S.Kom, M.Kom adalah Alumni S1 Teknik Informatika dari Universitas Teknologi Digital Indonesia Yogyakarta (Dulu bernama STMIK AKAKOM)
dan Alumni S2 Teknik Informatika dari UPI YPTK Padang

hubungi saya di candraadiputra (at) gmail (dot) com

12 thoughts on “Cara Menampilkan Multiple Marker di Google Map

  1. DI Tunggu Postingannya Gan.
    Yang Ini..

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

    udah ada postingannya belum??

  2. wah, berguna banget,, boleh minta bantuan g? kalo mau bikin multiple maker tapi pake icon yang berbeda sesuai kategori gitu gimana ya??

Leave a Reply to david Cancel reply

Your email address will not be published. Required fields are marked *