Infoboxes for Bing Maps AJAX 7.0 (standard, custom, ajax and sticky)

example-1.js

/*********************************************************************************************
 * Pin 1: Standard  non-sticky autogenerated infobox.
 *********************************************************************************************/
var pin1 = map.AddPushpin(
	new Microsoft.Maps.Location(50, 0),
	{
		text: '1',

		// Standard infobox settings
		title: 'Standard (non-sticky) infobox',
		description: 'This infobox has been generated using both the <b>title</b> and the <b>description</b> options and is styled by CSS.'
	}
);

example-2.js

/*********************************************************************************************
 * Pin 2: Custom infobox.
 *********************************************************************************************/
var pin2 = map.AddPushpin(
	new Microsoft.Maps.Location(25, 0),
	{
		text: '2',
		sticky: true,

		// Custom infobox
		infobox: $('<span>Sticky and custom infobox using arbitrary HTML code</span>')
	}
);	

example-3.js

/*********************************************************************************************
 * Pin 3: Custom infobox where a part of the contents use an anonymous event handler.
 *********************************************************************************************/
var custom_contents =  $('<div>Custom infobox with jQuery event listeners on some of its children: only the button triggers the event listener, not the rest of the infobox contents.</div>');
$('<button>This button has an anonymous event handler</button>')
 .click(function(){ alert('The button was clicked'); })
 .appendTo(custom_contents);

var pin3 = map.AddPushpin(
	new Microsoft.Maps.Location(0, 0),
	{
		text: '3',
		sticky: true,

		// Custom infobox
		infobox: custom_contents
	}
);

example-4.js

/*********************************************************************************************
 * Pin 4: Sticky infobox whose contents are loaded via ajax using .load()
 *********************************************************************************************/
var pin4 = map.AddPushpin(
	new Microsoft.Maps.Location(-30, 0),
	{
		text: '4',
		sticky: true,

		// Custom infobox
		infobox: $('<span>Loading contents...</span>').load('ajax.txt')
	}
);

example-5.js

/*********************************************************************************************
 * Pin 5 & 6: Custom infobox with shared event handlers yet with each a reference
 * to the Pushpin the event comes from, and the Map in which it is contained.
 *********************************************************************************************/

// Event handlers shared by Pin 5 and Pin 6
function onzoom(e){
	e.data.Map.setView({
		animate: true,
		center: e.data.Pushpin.getLocation()
	});
}
function onclose(e){
	e.data.Pushpin.HideInfoBox();
}	


// Pin 5: the Pushpin object
var pin5 = map.AddPushpin(
	new Microsoft.Maps.Location(45, 90),
	{
		text: '5',
		sticky: true,
		infobox: $('<div>Pin 5: uses the same event handler as Pin 6<hr/></div>')
	}
);

// Pin 5: Zoom button
$('<button>Center to this location</button>')
 .bind(
	 'click',
	 {'Pushpin': pin5, 'Map': map},
	 onzoom
 )
 .appendTo(pin5.infobox);

// Pin 5: Close button
$('<button>Close this infobox</button>')
 .bind(
	 'click',
	 {'Pushpin': pin5},
	 onclose
 )
 .appendTo(pin5.infobox);

// Pin 6: the Pushpin object
var pin6 = map.AddPushpin(
	new Microsoft.Maps.Location(5, 90),
	{
		text: '6',
		sticky: true,
		infobox: $('<div>Pin 6: uses the same event handler as Pin 5<hr/></div>')
	}
);


// Pin 6: Zoom button
$('<button>Center to this location</button>')
 .bind(
	 'click',
	 {'Pushpin': pin6, 'Map': map},
	 onzoom
 )
 .appendTo(pin6.infobox);
 
// Pin 6: Close button
$('<button>Close this infobox</button>')
 .bind(
	 'click',
	 {'Pushpin': pin6},
	 onclose
 )
 .appendTo(pin6.infobox);