1

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
J86
  • 14,345
  • 47
  • 130
  • 228

1 Answers1

2

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.

rbrundritt
  • 16,570
  • 2
  • 21
  • 46
  • Where is the download for this? I can't see it on link you've provided :( – J86 Dec 29 '16 at 14:19
  • You have to download the complete project from the source code tab. There is a blue download button on the right. http://bingmapsv7modules.codeplex.com/SourceControl/latest – rbrundritt Dec 29 '16 at 14:59
  • I am showing the infobox on `mouseover`, and right now any tiny movements of the mouse on the pushpin causes the infobox to hide and show (it is like flashing even though I haven't moved off the pushpin). Is there a fix for this? – J86 Dec 30 '16 at 10:45
  • 1
    Doing some testing, this only occurs when the mouse overlaps the arrow of the infobox, at which point the mouse is no longer over the pushpin, but over the arrow. So this is to be expected. You could also adjust the arrow position so that it appears on the edge of the pushpin, but this may not be desired. You could add a mouse over event on the infobox itself and then monitor both the mouseout events of the pushpin and the infobox and only hide the infobox when the mouse isn't over either of these. Another option is to simply hide the arrow. – rbrundritt Dec 31 '16 at 10:26
  • Thanks, you've been a great help. – J86 Dec 31 '16 at 11:36