var markers = [];
var info = [];

google.maps.event.addDomListener(window, 'load', function () {
  var map = new google.maps.Map(document.body, {
    center: new google.maps.LatLng(41.88, -87.63),
    zoom: 15,
  });

  $.getJSON('bars.json', function (bars) {
    bars.forEach(function (bar, index) {
      markers[index] = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        icon: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
        map: map,
        position: new google.maps.LatLng(bar.lat, bar.lng),
      });
      info[index] = new google.maps.InfoWindow({
        content: '<h1>'+ bar.name +'</h1>',
      });
      markers[index].addListener('click', function () {
        info[index].open(map, markers[index]);
      });
    });
  });
});