Multiple Pushpins and Infoboxes in Bing Maps V7

In Bing Maps an Infobox (or popup) is just another entity that you can treat just like a pushpin. This gives a lot of flexibility in what can be done with the Infobox class. For example, if you want to mark a point on the map you can simply use an infobox instead of a pushpin. This might be ideal for situations where the point you are marking is very small and the pushpin might be too large to mark the point accurately. With this added flexibility we also end up with some added complexity. Because the infobox class is treated as just another entity it is possible for them to be layered behind other entities. This can result in pushpins appearing overtop of the infobox which is usually less than ideal.

In the most situations we want an infobox to appear when a user clicks on a pushpin and we expect this infobox to appear above everything else. We also expect the content of the infobox to be related to the pushpin we clicked.

To accomplish this, a general best practice is to store the metadata for each pushpin as a property of it, that way when an event is fired on the pushpin you have all the metadata associated with it. You can then use one infobox over and over again and just update the position and content when a pushpin is clicked. This will result in a lot less objects in the DOM which will help to ensure good performance. To keep the infobox above your data an easy thing to do is create two EntityCollections, one for data and the other for infoboxes. Add the data EntityCollection to the map first followed by the Infobox EntityCollection. This will ensure that your data (i.e. pushpin) always show up under your infoboxes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src=""></script>

      <script type="text/javascript">
          var map = null, infobox, dataLayer;

          function GetMap() {
              // Initialize the map
              map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                         { credentials: "Bing Maps Key" });

              dataLayer = new Microsoft.Maps.EntityCollection();

              var infoboxLayer = new Microsoft.Maps.EntityCollection();

              infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });


          function AddData() {
              var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 30));
              pin1.Title = "This is Pin 1";
              pin1.Description = "Pin 1 description";
              Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);

              var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, -30));
              pin2.Title = "This is Pin 2";
              pin2.Description = "Pin 2 description";
              Microsoft.Maps.Events.addHandler(pin2, 'click', displayInfobox);

          function displayInfobox(e) {
              if (e.targetType == 'pushpin') {
                  infobox.setOptions({ visible: true, title:, description: });
   <body onload="GetMap();">
      <div id='myMap' style="position:relative;width:600px;height:400px;"></div>

By running this code sample and clicking on a pushpin you will end up with a map similar to this:


32 thoughts on “Multiple Pushpins and Infoboxes in Bing Maps V7

  1. Thanks a lot.. I was searching for hours and finally hit your blog.. you are the rockstar..thanks for sharing this valuable information

  2. Hi, Thank you for the code. It helped out tremendously. Two questions:
    1. how can I zoom in so that all the pins that I have placed are within my frame, no matter what size the frame or how many pins?
    2. Can this be made to execute on document ready instead of unload? How would I write that?


  3. I have another question. When there is only one pin on the map, the zoom state is pretty far out, like 2,000 miles. How can I get it to me closer?

  4. Hello Rick,
    if there are several hundred Pushpins, is it not better to laod only the location and an id? And if the user click one pushpin, call the data for the Infobox via Ajax? And may be you know a sample of this technique?

    • Yes, but before people get to that point they should at least be doing this as creating an infobox for each pushpin will cause issues well before having too much metadata. We have already wrote posts as well about using AJAX to pull in data on demand for detail information.

  5. Pingback: Connecting a SharePoint List to Bing Maps - Ricky's Bing Maps Blog - Site Home - MSDN Blogs

  6. Pingback: Infoboxes for Native Windows Store Apps - Ricky's Bing Maps Blog - Site Home - MSDN Blogs

  7. Pingback: How to Create a Spatial Web Service That Connects a Database to Bing Maps Using EF5 | Blog Bechir Slimen

      • Great post, rbrundritt. I am not sure why Bing Maps API doesn’t have this commonly used features. They infobox sample is too simplistic for any real world use. I wasted a few hours before finding this post before I almost give up.

      • We have seen a the infobox used in a lot of different ways. Most only need to show a single infobox at a time, while others want to be able to show lots of infoboxes, sometimes without a pushpin.

  8. Pingback: How to Create a Spatial Web Service That Connects a Database to Bing Maps Using EF5 | Maps Blog

  9. This is an excellent sample. It works perfectly for me on *most* or my pages. I have one page that has two maps and now I have a collision. Even though I instantiate my infobox as “new” before adding it to the layer, it gets altered/lost as soon as the second map is bound. By “bound”, I mean this is all going through a custom knockout binding. The first map is bound on page load, and everything works fine. The second map is brought up in a modal when via user request and is bound at that time. The first time I load the modal map, everything is fine in that map, but now the first map has lost its infobox. After that, neither map will have infoboxes.

    Any suggestions?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s