/ Published in: jQuery
**Important: this snipplet has moved to Github.**
- [Infoboxes for Bing Maps AJAX 7.0 (standard, custom, ajax and sticky)](https://gist.github.com/1973119)
- [Infoboxes for Bing Maps AJAX 7.0 (standard, custom, ajax and sticky)](https://gist.github.com/1973119)
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/********************************************************************************************* * 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.' } ); /********************************************************************************************* * 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>') } ); /********************************************************************************************* * 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 } ); /********************************************************************************************* * 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') } ); /********************************************************************************************* * 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);
URL: http://ve7ajax.googlecode.com/