I am experimenting with the sample code on the Bing SDK site but am unable to get the click event to work with the pushpins I am adding in a JS .each loop that pulls in longitude, latitude coordinates from a sql server. I can get the push pins to display fine, I can get the InfoBoxes to display fine if I set their visible to true in the loop, but if I set the visible property to false in the loop and then try to set visible to true with the pushpin click event nothing happens.
<script type="text/javascript">
$(document).ready(function () {
var map = null;
var pinInfobox = null;
function LoadMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: "Aq85qFzkJkdfauSc1nXq3IATrqgPGN77_MBhghypyJ94ygTElWHSHYv3WXYZT-3E"} );
}
function displayInfobox(e) {
defaultInfobox.setOptions({ visible: true });
}
LoadMap();
var url = "/Job/GetLocations";
$.getJSON(url, null, function (data) {
$.each(data, function (index, LocationData) {
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: '' });
pushpin.setLocation(new Microsoft.Maps.Location(LocationData.Latitude, LocationData.Longitude));
var Route = LocationData.PickupCity + ' to ' + LocationData.DeliveryCity;
var Details = 'Pays $' + LocationData.Payment + '<br>' + 'Pickup ' + LocationData.PickupHour + LocationData.PickupMinute + '<br>' + 'Deliver ' + LocationData.DeliveryHour + LocationData.DeliveryMinute;
var infoboxOptions = { visible: false, title: Route, description: Details };
var defaultInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(LocationData.Latitude, LocationData.Longitude), infoboxOptions);
Microsoft.Maps.Events.addHandler(pushpin, 'click', displayInfobox);
map.entities.push(pushpin);
map.entities.push(defaultInfobox);
});
map.setView({ zoom: 7, center: new Microsoft.Maps.Location(34.470639154314995, -118.55275198817253) });
});
});
</script>