Infoboxes in Bing Maps v7 (standard, custom, ajax and sticky)


/ Published in: jQuery
Save to your folder(s)

**Important: this snipplet has moved to Github.**

- [Infoboxes for Bing Maps AJAX 7.0 (standard, custom, ajax and sticky)](https://gist.github.com/1973119)


Copy this code and paste it in your HTML
  1. /*********************************************************************************************
  2.  * Pin 1: Standard non-sticky autogenerated infobox.
  3.  *********************************************************************************************/
  4. var pin1 = map.AddPushpin(
  5. new Microsoft.Maps.Location(50, 0),
  6. {
  7. text: '1',
  8.  
  9. // Standard infobox settings
  10. title: 'Standard (non-sticky) infobox',
  11. description: 'This infobox has been generated using both the <b>title</b> and the <b>description</b> options and is styled by CSS.'
  12. }
  13. );
  14.  
  15.  
  16. /*********************************************************************************************
  17.  * Pin 2: Custom infobox.
  18.  *********************************************************************************************/
  19. var pin2 = map.AddPushpin(
  20. new Microsoft.Maps.Location(25, 0),
  21. {
  22. text: '2',
  23. sticky: true,
  24.  
  25. // Custom infobox
  26. infobox: $('<span>Sticky and custom infobox using arbitrary HTML code</span>')
  27. }
  28. );
  29.  
  30.  
  31. /*********************************************************************************************
  32.  * Pin 3: Custom infobox where a part of the contents use an anonymous event handler.
  33.  *********************************************************************************************/
  34. 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>');
  35. $('<button>This button has an anonymous event handler</button>')
  36. .click(function(){ alert('The button was clicked'); })
  37. .appendTo(custom_contents);
  38.  
  39. var pin3 = map.AddPushpin(
  40. new Microsoft.Maps.Location(0, 0),
  41. {
  42. text: '3',
  43. sticky: true,
  44.  
  45. // Custom infobox
  46. infobox: custom_contents
  47. }
  48. );
  49.  
  50.  
  51. /*********************************************************************************************
  52.  * Pin 4: Sticky infobox whose contents are loaded via ajax using .load()
  53.  *********************************************************************************************/
  54. var pin4 = map.AddPushpin(
  55. new Microsoft.Maps.Location(-30, 0),
  56. {
  57. text: '4',
  58. sticky: true,
  59.  
  60. // Custom infobox
  61. infobox: $('<span>Loading contents...</span>').load('ajax.txt')
  62. }
  63. );
  64.  
  65.  
  66. /*********************************************************************************************
  67.  * Pin 5 & 6: Custom infobox with shared event handlers yet with each a reference
  68.  * to the Pushpin the event comes from, and the Map in which it is contained.
  69.  *********************************************************************************************/
  70.  
  71. // Event handlers shared by Pin 5 and Pin 6
  72. function onzoom(e){
  73. e.data.Map.setView({
  74. animate: true,
  75. center: e.data.Pushpin.getLocation()
  76. });
  77. }
  78. function onclose(e){
  79. e.data.Pushpin.HideInfoBox();
  80. }
  81.  
  82.  
  83. // Pin 5: the Pushpin object
  84. var pin5 = map.AddPushpin(
  85. new Microsoft.Maps.Location(45, 90),
  86. {
  87. text: '5',
  88. sticky: true,
  89. infobox: $('<div>Pin 5: uses the same event handler as Pin 6<hr/></div>')
  90. }
  91. );
  92.  
  93. // Pin 5: Zoom button
  94. $('<button>Center to this location</button>')
  95. .bind(
  96. 'click',
  97. {'Pushpin': pin5, 'Map': map},
  98. onzoom
  99. )
  100. .appendTo(pin5.infobox);
  101.  
  102. // Pin 5: Close button
  103. $('<button>Close this infobox</button>')
  104. .bind(
  105. 'click',
  106. {'Pushpin': pin5},
  107. onclose
  108. )
  109. .appendTo(pin5.infobox);
  110.  
  111. // Pin 6: the Pushpin object
  112. var pin6 = map.AddPushpin(
  113. new Microsoft.Maps.Location(5, 90),
  114. {
  115. text: '6',
  116. sticky: true,
  117. infobox: $('<div>Pin 6: uses the same event handler as Pin 5<hr/></div>')
  118. }
  119. );
  120.  
  121.  
  122. // Pin 6: Zoom button
  123. $('<button>Center to this location</button>')
  124. .bind(
  125. 'click',
  126. {'Pushpin': pin6, 'Map': map},
  127. onzoom
  128. )
  129. .appendTo(pin6.infobox);
  130.  
  131. // Pin 6: Close button
  132. $('<button>Close this infobox</button>')
  133. .bind(
  134. 'click',
  135. {'Pushpin': pin6},
  136. onclose
  137. )
  138. .appendTo(pin6.infobox);

URL: http://ve7ajax.googlecode.com/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.