SD Shared

Multi Marker Google Map Api dengan Json

Pertama buatlah file json, dah isinya seperti ini :

[{
    "title": "marker1",
    "lat": -6.168374,
    "lng": 106.7586
  },
 {
    "title": "marker2",
    "lat": -6.185995,
    "lng": 106.793307
  }
]

Kemudian initialize map awal seperti dibawah ini.

Function initialize(){ 
   //Mengambil koordinat utama
   var latLng = new google.maps.LatLng(-6.183905,106.826838);
   //Membuat map utama dan pada tag div dengan atribut id = map canvas
   var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 11,
   center: latLng,
   mapTypeControl: false,
   mapTypeId: google.maps.MapTypeId.ROADMAP
   })
}

Setelah membuat method untuk load marker, seperti ini :

function loadmarker(){  
     $.getJSON("db/file.txt", function(json1) {
         $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.lat, data.lng); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng,
                icon :image,
                title: data.title
            });
            var iw = new google.maps.InfoWindow({
               content: '<b>title :</b>'+data.title,
            });
         google.maps.event.addListener(marker, "click", function (e) {       
         iw.open(map, marker);});
            marker.setMap(map);
         });
      });
   }