Can anyone provide assistance?
I am currently utilizing the latest Bing Maps version (v8), and I have encountered an issue. When creating a custom Infobox and populating its contents using an async request such as setTimeout/ajax, the mouseout event is triggered even when the cursor appears to be within the boundaries of the infobox window. This occurs even if minor DOM changes are made to the infobox, so it doesn't seem like the infobox is being cleared or refreshed in any way... unless Microsoft is implementing something unusual!
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'My Bing Maps Key',
center: new Microsoft.Maps.Location(47.60357, -122.32945)
});
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(2, map.getBounds());
var infobox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), {
htmlContent: '<div style="height: 200px; width: 200px; background-color: #fff">{content}</div>', visible: false });
infobox.setMap(map);
for (var i = 0; i < pushpins.length; i++) {
var pushpin = pushpins[i];
Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', openInfoboxForPin);
Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', closeInfobox);
}
map.entities.push(pushpins);
function openInfoboxForPin(e) {
//Ensure that the infobox contains metadata to display.
if (e.target) {
//Set the infobox options with the pushpin's metadata.
infobox.setOptions({
location: e.target.getLocation(),
visible: true,
});
setTimeout(function() {
infobox.setOptions({ htmlContent: pushpinFrameHTML.replace('{content}',html) });
}, 400);
}
}
function closeInfobox() {
infobox.setOptions({ visible: false });
}
JSFIDDLE: View example on Fiddle
Your help would be greatly appreciated. Thank you.