Created
March 4, 2012 13:58
-
-
Save cecilemuller/1973119 to your computer and use it in GitHub Desktop.
Infoboxes for Bing Maps AJAX 7.0 (standard, custom, ajax and sticky)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********************************************************************************************* | |
* 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.' | |
} | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********************************************************************************************* | |
* 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>') | |
} | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********************************************************************************************* | |
* 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 | |
} | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********************************************************************************************* | |
* 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') | |
} | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********************************************************************************************* | |
* 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment