Java script - Google Maps API info window for multiple markers

Java script - Google Maps API info window for multiple markers

I have the following code:
jQuery(document).ready(function(){
var map;
var initialized = false;
// Lets use self instead of this.
var self = this;
// Lets only load the map if were on this tab.
// Also only intialize the map ONCE.
$('#siteDetail').find('.ui-tabs-nav li').each(function() {
if($(this).find('a').text() === 'Map') {
if($(this).hasClass('ui-state-active')) {
initialize();
initialized = true;
} else {
$(this).click(function() {
if(!initialized) {
self.initialize(self.collectSitesGPS(),
self.collectSingleSiteGPS());
initialized = true;
}
});
}
}
});
// Google Maps API vs3
self.initialize = function(locations, singleLocation){
console.log(singleLocation);
var pinColor = "97CBE6";
var pinImage = new
google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|"
+ pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new
google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
var singleLocationObject = singleLocation[0];
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(singleLocationObject['lat'],
singleLocationObject['long']),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for(i = 0; i < locations.length; i++){
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i]['lat'],
locations[i]['long']),
map: map
});
}
currentLocation = new google.maps.Marker({
position: new google.maps.LatLng(singleLocationObject['lat'],
singleLocationObject['long']),
map: map,
icon: pinImage,
shadow: pinShadow
});
google.maps.event.trigger(map, "resize");
}
self.collectSitesGPS = function(){
var parsedObject;
CT.postSynch('site/detail/grabAllSites', {}, function(data){
parsedObject = JSON.parse(data);
});
return parsedObject;
}
self.collectSingleSiteGPS = function(){
var siteId =
$('#mainContent').find('#siteWrapper').find('#sitePreview').attr('siteid');
var parsedObject;
CT.postSynch('site/detail/grabSingleSite', {id : siteId},
function(data){
parsedObject = JSON.parse(data);
});
return parsedObject;
}
// Load the map.
google.maps.event.addDomListener(window, 'load', self.initialize);
});
This code has two functions inside, collectSitesGPS which returns and
creates about 800+ markers. Each of those need an info window when clicked
... each of those info windows will be unique...
Any ideas how to do something like this?