Infobox with Options

  • Article

This example shows how to create and infobox with the options that hide the pointer and close button, and additionally has two action links.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
	<script type='text/javascript'>
    var map, infobox;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {});

        var center = map.getCenter();

        //Create an infobox that doesn't have a pointer or close button.
        infobox = new Microsoft.Maps.Infobox(center, {
            title: 'Map Center',
            description: 'This is the center of the map.',
            showPointer: false, 
            showCloseButton: false,
            actions: [{
                label: 'Handler1',
                eventHandler: function () {
                    alert('Handler1');
                }
            }, {
                label: 'Handler2',
                eventHandler: function () {
                    alert('Handler2');
                }
            }]
        });

        //Assign the infobox to a map instance.
        infobox.setMap(map);
    }
    </script>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

This code displays an infobox that doesn’t have a pointer or close button but does have two link buttons.

Screenshot of a Bing map showing an infobox showing a description and two link buttons.