Source: maps/callout/InfoBox.js

/**
 * @class
 * Displays a callout using the InfoBox utility (see http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html)
 * and populates the content of the info box with details read from the Google PlaceResult object.
 * 
 * @constructor
 * @param {lucid.maps.callout.InfoBoxOptions} options  The settings that control the style and content of the info box.
 */
lucid.maps.callout.InfoBox = function( options )
{
	var infoWindow;
	var currentMarker;
	
	
	function init()
	{
		infoWindow = new InfoBox( options );
	}
	
	
	this.add = function( marker )
	{
		marker.infoBoxClickEventListener = google.maps.event.addListener( marker, "click", createClickHandler( marker ) );
	};
	
	this.remove = function( marker )
	{
		if (marker.infoBoxClickEventListener)
		{
			google.maps.event.removeListener( marker.infoBoxClickEventListener );
			marker.infoBoxClickEventListener = null;
		}
		
		if (marker == currentMarker)
		{
			this.close();
		}
	};
	
	this.close = function()
	{
		infoWindow.close();
		currentMarker = null;
	};
	
	function createClickHandler( marker )
	{
		return function()
		{
			infoWindow.close();
			
			currentMarker = marker;
			
			infoWindow.setContent( createInfoBoxContent( marker ) );
			infoWindow.open( marker.getMap(), marker );
		};
	}
	
	function createInfoBoxContent( marker )
	{
		// The inner content is the content for this specific marker ...
		var innerContentDiv = (options.contentCreator) ? options.contentCreator( marker ) : lucid.maps.callout.createContentTitle( marker );
		
		// ... which we wrap in the 'content' CSS to position is correctly in the info box.
		var contentDiv = jQuery( "<div class='content'></div>" );
		contentDiv.append( innerContentDiv );
		
		// We then add the box with the arrow around that content.
		var infoBoxDiv = jQuery( "<div class='custom-info-box'><div class='arrow'></div></div>" );
		infoBoxDiv.append( contentDiv );
		
		return infoBoxDiv[0];
	}
	
	
	init();
};

/**
 * @type {object}
 * @augments InfoBoxOptions (see http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html#InfoBoxOptions)
 * @property {function} [contentCreator]  The function that creates the content (HTML) for the info box.
 *                                        If left undefined then only the title/name of the place is shown in the info box.
 */
lucid.maps.callout.InfoBoxOptions = {};