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.

Categories: Google Maps

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

12 Comments

Karaeng Sero · 21 June , 2017 at 6:57 pm

mantab banget ,…. pas ma skripsi ane ,…. thanks mas bro

Eko Pras · 8 June , 2017 at 2:57 pm

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??

david · 17 April , 2017 at 12:33 pm

gan itu kan markernya nampil semua, kalau markernya itu difilter lagi sehingga tidak semua marker tampil

mirwan · 1 May , 2016 at 2:03 am

bang, kalau menambahkah dropdown list beberapa kota tetapi dengan beberapa marker, bagaimana ya

kaswar wijaya eka putra · 3 January , 2016 at 5:08 pm

ada ngak untuk memanggil data yang tersimpan di sql

mas jarwo · 20 April , 2015 at 1:37 am

terima kasih banyak gan, ente sangat membantu projek ane, semoga rejekinya bertambah. amiiin….

Rochmat Sentosa · 23 February , 2015 at 9:19 am

Terima kasih mas candra, informasinya berguna sekali.
semoga tambah sukses dan ditunggu ilmu-ilmu selanjutnya

afrisalm0800003 · 1 September , 2014 at 10:50 pm

mas kalau di marker nya gak tampil foto lokasi t pa masalah nya t mas

Anonymous · 1 September , 2014 at 10:48 pm

mas saya mau tanya kalau meker nya gak tampil foto darilokasi meker t pa masatahnya t mas

Ivan Ivan · 24 July , 2014 at 11:12 am

mas sayamau tanya gimana klo yg mau dibuat iconnya berbeda2?

Anonymous · 24 May , 2014 at 12:09 am

informasinya berguna sekali untuk menambah wawasan tentang penggunaan komponen google maps

tari · 21 December , 2012 at 1:15 am

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

Comments are closed.