Google maps API - Open infowindow of a marker and set map to center on click of a div constructed through javascript

Here's the problem.

I've a list of locations comi开发者_开发知识库ng from a service, with which i construct a list of divs (location's address and other details) each with unique id (like locationA, locationB..)in the left side bar and display markers on map in the right side. I'm using 'for' loop to iterate through locations and set markers and its infowindows. (map,markers and infowindows being global variables)

I want a marker to be centered and open its infowindow, onclick of its respective div.

I could not use google.maps.marker.adddomlistener, since the div is added through javascript. so i used jquery.live() in that 'for' loop to bind click event to trigger the click event of the respective marker (since this functionality is already implemented in markers click event). Turns out, all div opens the first markers infowindow.

Here it is, I apologize for posting entire code. I just want you guys to understand the situation.

$('#button').click(function () {
    var zipCode = $('#text-search-input').val();
    GetLocations(zipCode);
});

function GetLocations(zipCode) {

var zip = { zip: zipCode };
$.ajax({
    url: '/locations/',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(zip),
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        $('#locations').html("");
        if (data.length != 0) {
            for (var i = 0; i < data.length; i++) {
                $('#locations').append('<div class="locator-search-results" id=location' + String.fromCharCode(65 + i) + '>' +
                    '<div class="locator-search-index">' + String.fromCharCode(65 + i) +
                    '</div><div class="locator-search-details"><h2>' + data[i].Name +
                    '</h2><p>' + data[i].Address.Address1 + ',<br />' + data[i].Address.City + ',' + data[i].Address.State + '</p></div></div>');
            }
            initializemap(data[0].Lattitude, data[0].Langitude, 11);
            Setmarkers(data);
        }
        else {
            $('#locations').html("");
            $('#locations').append('<div id=location class="locator-search-results"><p><strong>No locations found !</strong></p></div>');
            initializemap(54.14676, -139.004494, 13);
            SetDefaultMarker(54.14676, -139.004494, 'Some Location');
        }

    },
    error: function () {
        $('#locations').html("");
        $('#locations').append('<div id=location class="locator-search-results"><p><strong>No locations found !</strong></p></div>');
        initializemap(54.14676, -139.004494, 13);
        SetDefaultMarker(54.14676, -139.004494, 'Some Location');
    }
});

}

var map;

function initializemap(lat, lang, zoom) {

var myLat;
var myLong;
var marker;
myLat = parseFloat(lat);
myLong = parseFloat(lang);

var latlng = new google.maps.LatLng(myLat, myLong);
var myOptions = {
    zoom: zoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function Setmarkers(data) {
var markers = [];
var infowindow = null;

if (data.length != 0) {
    var i = 0;
    for (i = 0; i < data.length; i++) {
        var latlng = new google.maps.LatLng(data[i].Lattitude, data[i].Langitude);

        infowindow = new google.maps.InfoWindow({
            content: "Loading"
        });
        var markerHtml = "<div><p><strong>" + data[i].Name + "</strong><br/>" + data[i].Address.Address1 + "," + data[i].Address.Address2 + "<br/>" + data[i].Address.City + "," + data[i].Address.State + "<br/></p>";
        var iconUrl = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=' + String.fromCharCode(65 + i) + '|00AEFF|000000|';
        var marker = new google.maps.Marker({
            position: latlng,
            title: data[i].Name,
            html: markerHtml,
            icon: iconUrl
        });
        var divid = 'div#location' + String.fromCharCode(65 + i);

        marker.setMap(map);
        markers[i] = marker;

        google.maps.event.addListener(markers[i], 'click', function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
            map.setCenter(this.getPosition());
        });

    }
}
}

function SetDefaultMarker(lat, lng, text) {

var latlng = new google.maps.LatLng(lat, lng);
var iconUrl = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=A|00AEFF|000000|';
var marker = new google.maps.Marker({
    position: latlng,
    title: text,
    icon: iconUrl
});
var infowindow = new google.maps.InfoWindow({
    content: text
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function () {
    infowindow.open(map, this);
    map.setCenter(this.getPosition());
});
}