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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></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();
              map.entities.push(dataLayer);

              var infoboxLayer = new Microsoft.Maps.EntityCollection();
              map.entities.push(infoboxLayer);

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

              AddData();
          }

          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);
              dataLayer.push(pin1);

              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);
              dataLayer.push(pin2);
          }

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

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

About these ads

Bing Maps

This entry was posted on October 13, 2011, 7:42 pm and is filed under Bing Maps Basics. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

#1 by Lewis McCrary on December 15, 2011 - 7:34 pm

Just what I needed. Perfect! :)

#2 by Bhushan on July 19, 2012 - 2:27 pm

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

#3 by ram523 on October 5, 2012 - 11:06 am

Your the rock star………. Thank god my hours of research successes by your blog…
keep going on hero…………

#4 by gmarez on October 9, 2012 - 6:04 am

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?

Thanks

#5 by gmarez on October 13, 2012 - 5:41 pm

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?

#6 by Aleks on October 23, 2012 - 3:34 pm

Can we do same thing with WPF?

- #7 by rbrundritt on October 24, 2012 - 5:02 pm
  
  A similar approach can be used for WPF but the code is different. You will need to use a user control for the infobox.
  
  - #8 by Theo on January 15, 2013 - 10:43 am
    
    can you please show us an example of the user control for the lightbox in WPF
  - #9 by Theo on January 15, 2013 - 10:43 am
    
    infobox*
#10 by Kyle on March 27, 2013 - 3:57 pm

Hey,

Thanks a lot for this tutorial, it’e been extremely helpful!

Kyle

#11 by gu1ms on May 14, 2013 - 8:16 am

Great script! Thanks to you, I saved a great deal of time on my project ;)
Thanks again :)

#12 by markafisher92 on May 14, 2013 - 6:06 pm

This is great! What if I have a bunch of locations, like 10? How would I put these into an array to display each one?

- #13 by rbrundritt on May 16, 2013 - 8:33 am
  
  Simply loop through your array and create a pushpin for each item in the array and add it to the map. It’s pretty easy.
  
  - #14 by markafisher92 on May 16, 2013 - 2:43 pm
    
    I am having trouble doing this. My array is being filled, but the values arent getting there.
  - #15 by rbrundritt on May 16, 2013 - 3:02 pm
    
    Go to the Bing Maps forums and provide a code sample with your question as it will be easier to debug that way. You can find the forums here: http://social.msdn.microsoft.com/Forums/en-US/category/bingmaps
  - #16 by markafisher92 on May 16, 2013 - 6:48 pm
    
    Thank you very much. I will.