I am trying to create a google map for my website. i wanna add few places and when people click the icons. a info window should displace the information i plan to display.

Where i am ?

i am able to achieve what i want. but i am not able to add click even to every icon. when i click an icon. only the last loaded markers window it displayed. I understand there is a logic error. but i am not able to find a logic of doing the same.



HTML Code:
var map;
var places = [
  ['HMV', 13.005611, 77.587561, 1],
  ['Coogee Beach', 13.001621, 77.577631, 2],
  ['Cronulla Beach', 13.005421, 77.572531, 3]
];

$(document).ready(function () {
    var myLatlng = new google.maps.LatLng(13.005621, 77.577531);
    var myOptions = {
        zoom: 15,
        center: myLatlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    loadplaces(map, places);
});

function loadplaces(map, locations) {
    var image = 'images/blackmarker.png';
    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            //icon: image,
            title: beach[0],
            zIndex: beach[3]
        });
        var infowindow = new google.maps.InfoWindow({
        content: beach[0],
        zIndex: beach[3]
        });
        //infowindow.open(map, marker);
        google.maps.event.addListener(marker, 'click', function (event) {
            infowindow.open(map, marker);
        });
    }
}