Как сделать в Google картах информационные блоки на маркерах?

Question

Ilya Karpov @ilyakarpov84

Как сделать в Google картах информационные блоки на маркерах?

Не могу никак сделать карту с множеством маркеров и чтобы при клике на каждый появлялось окно с описанием.

<div id="map-canvas"></div>

#map-canvas{
  width:960px;
  height:540px;
}

var Gita_Ayu_Complex = new google.maps.LatLng(-8.694049, 115.172179),
  Arya = new google.maps.LatLng(-8.686338, 115.159452),
  Black_and_Red = new google.maps.LatLng(-8.685060, 115.156906),
  Black_and_White = new google.maps.LatLng(-8.685833, 115.164303),
  Dolce_Vita = new google.maps.LatLng(-8.679290, 115.167426),
  Enjoy = new google.maps.LatLng(-8.691410, 115.169988),
  Enjoying_Life = new google.maps.LatLng(-8.694613, 115.168819),
  Hidden_Oasis = new google.maps.LatLng(-8.685847, 115.174188),
  Holiday_Benoa = new google.maps.LatLng(-8.771255, 115.222004),
  Jimbaran_Hidden_Paradise_villa = new google.maps.LatLng(-8.784733, 115.168610),
  Ocean_Arya = new google.maps.LatLng(-8.686561, 115.158744),
  Harmony = new google.maps.LatLng(-8.686501, 115.158608),
  Ocean_Star1 = new google.maps.LatLng(115.156693, -8.685777),
  Ocean_Star2 = new google.maps.LatLng(-8.685745, 115.156822),
  Ocean_Star3 = new google.maps.LatLng(-8.685777, 115.156940),
  Veronika = new google.maps.LatLng(-8.692837, 115.168252);

var locationArray = [Gita_Ayu_Complex, Arya, Black_and_Red, Black_and_White, Dolce_Vita, Enjoy, Enjoying_Life, Hidden_Oasis, Holiday_Benoa, Jimbaran_Hidden_Paradise_villa, Ocean_Arya, Harmony, Ocean_Star1, Ocean_Star2, Ocean_Star3, Veronika];

var locationHrefArray = [
  'http://link1.ru/page.html',
  'http://link2.ru/page.html',
  'http://link3.ru/page.html',
  'http://link4.ru/page.html',
  'http://link5.ru/page.html',
  'http://link6.ru/page.html',
  'http://link7.ru/page.html',
  'http://link8.ru/page.html',
  'http://link9.ru/page.html',
  'http://link10.ru/page.html',
  'http://link11.ru/page.html',
  'http://link12.ru/page.html',
  'http://link13.ru/page.html',
  'http://link14.ru/page.html',
  'http://link15.ru/page.html',
  'http://link16.ru/page.html'
];

/*var locationNameArray = ['Chicago','Anchorage','Mexico City','The Equator','London','Johannesburg','Kinshasa','Sydney'];*/

var baloon = {
    url: 'http://www.magicofbali.com/assets/templates/site/images/baloon0.png',
    // This marker is 20 pixels wide by 32 pixels tall.
   // size: new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    //origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
   // anchor: new google.maps.Point(0, 32)
  };

var map;

function initialize() {
    var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(-8.7, 115.25)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
    var coord;
    for (coord in locationArray) {
      var mArray = [];
      mArray.push = new google.maps.Marker({
        position: locationArray[coord],
        map: map,
        icon: baloon,
        title: locationHrefArray[coord]
      });
        
//for (var i = 0; i < locationHrefArray.length; i++) {
 //       google.maps.event.addListener(marker, 'click', function() {
//          document.location.href = locationHrefArray[i];
//        });
//      }
    }
  }  
        
//        goHref(marker, 'locationHrefArray[coord]');*/
  /*function goHref(marker, data) {
    new google.maps.event.addListener(marker, 'click', function(event) {
      	document.location.href(data);
      }); 

    }*/

google.maps.event.addDomListener(window, 'load', initialize);