none
Bing Maps V8 Infobox not expanding to fit content RRS feed

  • Question

  • The Bing Maps V7 to V8 Migration guide says that it is no longer necessary to explicitly set the height of an Infobox as it expands automatically to fit the content. Unfortunately this doesn't seem to be working. The following code will generate an infobox with overflowing text.
    infoBox = new Microsoft.Maps.Infobox(map.getCenter(), {
    			visible: true,
    			title: 'Sample Title',
    			description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue, lacus nec sagittis pretium, velit diam viverra arcu, non finibus mi urna sed ipsum. Pellentesque eu erat libero. Suspendisse sit amet ipsum urna.',
    		});
    infoBox.setMap(map);

    Monday, July 4, 2016 8:54 AM

Answers

  • Good news, this is now implemented in the experimental branch and will be in the main release branch in a couple of weeks. There are a couple of new infobox options that you can set around this as well: maxWidth, maxHeight

    [Blog] [twitter] [LinkedIn]

    Friday, August 26, 2016 4:57 PM
  • Good news, the team has made a fix such that if you set any infobox option, it will redraw it. This is currently in the experimental branch and will be added to the main release branch in a few weeks. In your case it would be easiest to set the visibility to true in your hideContent function.

    [Blog] [twitter] [LinkedIn]

    Thursday, November 9, 2017 11:36 PM

All replies

  • This is a known issue that the team is working on.


    [Blog] [twitter] [LinkedIn]

    Monday, July 4, 2016 4:52 PM
  • Good news, this is now implemented in the experimental branch and will be in the main release branch in a couple of weeks. There are a couple of new infobox options that you can set around this as well: maxWidth, maxHeight

    [Blog] [twitter] [LinkedIn]

    Friday, August 26, 2016 4:57 PM
  • The improvements are much appreciated. I'm still having a few issues though.

    I have HTML content that I'm setting as the description, with elements that the user can show/hide. Changing the display properties of these elements causes the box to resize, moving it out of alignment with the infobox stalk.

    I've tried using infoBox.setLocation(infoBox.getLocation()) after an item is shown in an attempt to force a redraw of the box position, but this seems to kill all of the infobox javascript, as does infoBox.setOptions({visible: true}). Is this a bug, or something that I'm doing wrong? Sample code below...

    var map, infoBox;
    		function GetMap() {
    			var map = new Microsoft.Maps.Map('#myMap',
    			{ credentials: "My Bing Maps Key"
    			});
    			map.entities.push(new Microsoft.Maps.Pushpin(map.getCenter()));
    			var content = "<a href=\"javascript:;\" onclick=\"hideContent();\">Toggle Content</a><br><span id=\"test\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue, lacus nec sagittis pretium, velit diam viverra arcu, non finibus mi urna sed ipsum. Pellentesque eu erat libero. Suspendisse sit amet ipsum urna.</span>";
    			infoBox = new Microsoft.Maps.Infobox();
    			infoBox.setMap(map);
    			infoBox.setOptions({ title: 'Test', description: content, visible: true, maxHeight: 220 });
    			infoBox.setLocation(map.getCenter());
    		}
    		function hideContent() {
    			var s = document.getElementById('test');
    			s.style.display = s.style.display == 'none' ? '' : 'none';
    			//infoBox.setLocation(infoBox.getLocation()); //This doesn't work
    			//infoBox.setOptions({visible: true}); //This doesn't work either
    		}

    Wednesday, August 31, 2016 2:36 PM
  • I believe this is a known issue that we are trying to figure out how best to address. Would a simple redraw function be acceptable? This will likely also be an issue for images as well since they may not be loaded when the size of the infobox is calculated.

    [Blog] [twitter] [LinkedIn]

    Wednesday, August 31, 2016 9:37 PM
  • I'd have thought a simple redraw function would work fine in my case, and with the problem you've identified with images loading. If it was possible to add a call to 'infoBox.redraw()' to an image onload event, or to my show/hide code then I imagine that would fix the problem.

    Do you know why my two commented out lines don't work? I'd have expected one of them to trigger some sort of redraw but they both basically kill the entire function.

    Thursday, September 1, 2016 8:09 AM
  • Did anything ever come of the idea of adding a 'redraw()' function to the infobox? I've managed to work around it by using a bit of jQuery to repopulate the content after any changes but it's not ideal.
    infoBox.setOptions({ description: $('.infobox-info').html() });


    Thursday, October 26, 2017 10:44 AM
  • This is logged as a feature request, however is marked as low priority as there is a fairly easy workaround as you noted and you are also the only one to have asked for this. That said, this feature is still on the list and may be added in a future update.

    [Blog] [twitter] [LinkedIn]

    Thursday, October 26, 2017 4:10 PM
  • Good news, the team has made a fix such that if you set any infobox option, it will redraw it. This is currently in the experimental branch and will be added to the main release branch in a few weeks. In your case it would be easiest to set the visibility to true in your hideContent function.

    [Blog] [twitter] [LinkedIn]

    Thursday, November 9, 2017 11:36 PM