How to create a button inside a bing map infobox?

Question

Am working on a bing map based application. I want to show buttons in the popup pushpin infobox to which am planning to associate a click event.

Answer 1

Look at the HtmlContent property of the infobox. You can supply your custom HTML for the Infobox's content via this property. As to how to associate a click event, it will depend on what you want to do. Look into jquery's .live() or its newer equivalent(.on() I think), and see if that will meet your needs.

Answer 2

The easy way is to use functionality that bing provides. Example with some text and two buttons in the infobox.

 var infoboxOptions = {
     title:'Infobox Title',
     actions: [
          {label: 'This is a button', eventHandler: btn1Handler}, 
          {label: '<div  style = "color:green"', eventHandler: btn2Handler},]  
 }; 

"title" is just a text title in the infobox.

"action" contains two properties:

1. label - Where you can put text or some html and css of the button.
2. eventHandler - Callback to the function that will handle the click on the button.

Create the infobox itself passing its location and "infoboxOptions" that we just created.

 var defaultInfobox = new Microsoft.Maps.Infobox(Location, infoboxOptions ); 

Add the info box to the map.

 map.entities.push(defaultInfobox);

The we create two click handle function as we provided in the "actions" property.

function btn1Handler() 
{ 
   //Do your stuff.
}

function btn2Handler() 
{ 
   //Do your stuff.
}