Bing Maps v8 - Infobox does not appear in the expected location when the map is zoomed out. RRS feed

  • Question

  • I'm trying to use an infobox as a tooltip. I want the infobox to appear at the pushpin the mouse hovers above.

    This functionality seems to work fine when the map is sufficiently zoomed in. However when the map is zoomed out - the infobox sometimes appears off the view-port (the infobox behaves as if the map has been translated horizontally).

    It's my suspicion that the map is simply wrapping on itself, because it's zoomed out almost all the way. Perhaps this means there are duplicate coordinates on the map canvas, though they're not shown in the view-port.

    Pushpins with coordinates that appear only once on the map canvas produce a tooltip in the correct location.

    Can anybody shed some light on this? Any help is appreciated.

    I've included a basic version of my code below.


    <!DOCTYPE html>
            <title>Bing Maps Full Width</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
            <div id='myMap' style='width: 100%; height: 500px;'></div>
            <script type='text/javascript' src='js/maps.js'></script>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
    var map;
    function loadMapScenario() {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'api key',
            maxZoom: 2,
            enableSearchLogo: false,
            disableBirdseye: true,
            showDashboard: false,
            showMapLabel: true,
            showScalebar: false,
            disablePanning: true,
            disableZooming: true,
            disableKeyboardInput: true,
            disableMouseInput: false,
            disableTouchInput: true,
            disableUserInput: false
        var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
        var infoBox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), { title: 'title',
        description: 'description', showCloseButton: false });
        for (var i = 0; i < pushpins.length; i++) {
            var pushpin = pushpins[i];
            Microsoft.Maps.Events.addHandler(pushpin, "mouseover", function (e) {

    Monday, July 11, 2016 3:10 AM


  • There is a known issue with the TestDataGenerator and "world-wrap" when zoomed out all the way. Notice that not all 10 pushpins are displayed on the map. The infobox is being displayed in the correct position, but the pushpin isn't being rendered.

    Also, looking through your map options there are a few that aren't needed:

    • enableSearchLogo - There is no search logo in V8.
    • disableBirdseye - Birdseye is not yet available in V8. We have a new experience and imagery coming later this fiscal year. When birdseye is released we will likely expose this option. You can leave this in your code so you don't have to make changes later.
    • disableKeyboardInput/disableMouseInput/disableTouchInput/disableUserInput - not used in V8

    [Blog] [twitter] [LinkedIn]

    Monday, July 11, 2016 6:35 PM