title: Bing Maps .v7 How to reference pushpins with links outside of the map?
body: <p>I have a Bing Map in which I have a set of pushpins, with InfoBoxes associated with each one.  I am using v7.</p>
  
  <p>I'd like have a link that is outside the map to display a particular pushpin's Infobox. How can this be done?</p>
  
  <p>example code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;&lt;/title&gt;
   &lt;style type="text/css"&gt;
    /* Define a style used for infoboxes */
    .NSIMInfoBox 
    {
     position: absolute;
     border: solid 2px black;
     background-color: White;
     z-index: 1000;
     padding: 5px;
     width: 250px;
     visibility: visible;
    }
    #mapDiv 
      {
      position: relative;
      top: 20;
      left: 20;
      width: 800px;
      height: 800px;
      border: solid 2px #555;
      }
   &lt;/style&gt;
  &lt;script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"&gt;
  
  &lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-1.5.2.min.js"&gt;&lt;/script&gt;
  
  &lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function () {
          getMap();
      });
  
      var pinInfobox = null;
      var map;
      var pin;
  
      function getMap() {
          map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
              { credentials: "apikey",
                  center: new Microsoft.Maps.Location(45.5, -122.5),
                  zoom: 10,
                  showScaleBar: true,
                  mapTypeId: Microsoft.Maps.MapTypeId.road
              });
  
  
          //          //Multiple locations
          //          var polygonWithPins = new Microsoft.Maps.EntityCollection();
          var loc1 = new Microsoft.Maps.Location(45.5, -122.5);
          var loc2 = new Microsoft.Maps.Location(45.6, -122.5);
  
          pin = new Microsoft.Maps.Pushpin(loc1);
          //Microsoft.Maps.Events.addHandler(pin, 'click', displayEventInfo);
          pin.setInfoBox(new InfoBox("&lt;strong&gt;Pushpin Number1!&lt;/strong&gt;"));
          map.entities.push(pin)
  
          var pin2 = new Microsoft.Maps.Pushpin(loc2);
          pin2.setInfoBox(new InfoBox("&lt;strong&gt;Pushpin Number 2!&lt;/strong&gt;"));
          map.entities.push(pin2)
  
  
      }
  
          function InfoBox(html) {
              this.div;
              this.html = html;
          }
  
          InfoBox.prototype.show = function (e) {
              if (this.div == undefined) {
                  //Create container div
                  this.div = document.createElement("div");
                  this.div.className = "NSIMInfoBox";
                  this.div.innerHTML = createInfoBox(this.html);
                  this.div.style.display = "";
                  var mapDiv = document.getElementById('mapDiv');
                  mapDiv.appendChild(this.div);
              }
  
              var pinLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);
  
              this.div.style.left = pinLocation.x + "px";
              this.div.style.top = pinLocation.y + "px";
              this.div.style.visibility = "visible";
              this.div.style.display = "block";
          };
  
          InfoBox.prototype.hide = function (e) {
              if (this.div != undefined) {
                  this.div.style.visibility = "hidden";
              }
          };
  
          //Extend pushpinclass
          Microsoft.Maps.Pushpin.prototype.setInfoBox = function (infoBox) {
              if (typeof this.infoBox != undefined &amp;&amp; this.infoBox != undefined &amp;&amp; this.infoBox != null) {
                  this.removeInfoBox();
              }
  
              // Add handlers for mouse events
              this.mouseoverHandler = Microsoft.Maps.Events.addHandler(this, 'click',
              function (e) { infoBox.show(e); }
             );
              this.mouseoutHander = Microsoft.Maps.Events.addHandler(this, 'mouseleave',
              function (e) { infoBox.hide(e); }
             );
          };
  
          // Extend the Pushpin class to remove an existing InfoBox object
          Microsoft.Maps.Pushpin.prototype.removeInfoBox = function () {
              this.infoBox = null;
  
              // Remove handlers for mouse events
              Microsoft.Maps.Events.removeHandler(this.mouseoverHandler);
              Microsoft.Maps.Events.removeHandler(this.mouseoutHander);
          }
  
          function createInfoBox(html) {
              var myHtml;
              myHtml = '&lt;div style="text-align:right; margin-right: 5px;" onclick="closeInfoBox();"&gt;x&lt;/div&gt;' +
                  '&lt;div style="padding: 5px;"&gt;' + html + '&lt;/div&gt;';
  
              return myHtml;
          }
  
          function closeInfoBox() {
              $('.NSIMInfoBox').hide();
          }
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="mapDiv" class="map"&gt;&lt;/div&gt;
      &lt;span class="click"&gt;click me!  - HERE I WANT TO SHOW THE FIRST PIN'S INFOBOX&lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>