I am using Bing Maps v8 and I would like to get the Infobox to be a little smart on where it shows.
Here is a CodePen of what I have. If you hover over the pushpin, you'll notice that the infobox shows towards the top and is thus cut off from view.
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Key Here',
center: new Microsoft.Maps.Location(51.50632, -0.12714)
});
var pinLocation = new Microsoft.Maps.Location(51.663088, -0.204133);
var pushpin = new Microsoft.Maps.Pushpin(pinLocation, null);
var infobox = new Microsoft.Maps.Infobox(pinLocation, { title: 'Map Center', description: 'London, UK', visible: false });
infobox.setMap(map);
Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function () { infobox.setOptions({ visible: true }) });
map.entities.push(pushpin);
}
Is there a way to make that smart, so that it always shows towards the centre of the map, this way it'll always be in view.
I have found this which moves the map about so that the infobox is within view, but that is not what I'm after. I don't want the map moving about, just the infobox to show towards the centre of the map.
There is a custom infobox module available that provides this exact functionality. It will reposition itself so that it is always in view. You can find this module here: http://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control
It is supported in Bing Maps V7 and V8.