Search code examples
javascriptpositionbing-mapsinfobox

Infobox position always towards centre of map in Bing Maps

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.

Solution

  • 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.