none
How to reference pushpins with links outside of the map? RRS feed

  • Question

  • I have a Bing Map in which I have a set of pushpins, with InfoBoxes associated with each one. I am using v7.

    I'd like have a link that is outside the map to display a particular pushpin's Infobox. How can this be done?

    example code:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
     <style type="text/css">
      /* 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;
        }
     </style>
    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    
    </script>
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
    
    </script>
    <script>
        $(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("<strong>Pushpin Number1!</strong>"));
            map.entities.push(pin)
    
            var pin2 = new Microsoft.Maps.Pushpin(loc2);
            pin2.setInfoBox(new InfoBox("<strong>Pushpin Number 2!</strong>"));
            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 && this.infoBox != undefined && 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 = '<div style="text-align:right; margin-right: 5px;" onclick="closeInfoBox();">x</div>' +
                    '<div style="padding: 5px;">' + html + '</div>';
    
                return myHtml;
            }
    
            function closeInfoBox() {
                $('.NSIMInfoBox').hide();
            }
    
    
    </script>
    </head>
    <body>
        <div id="mapDiv" class="map"></div>
        <span class="click">click me!  - HERE I WANT TO SHOW THE FIRST PIN'S INFOBOX</span>
    </body>
    </html>
    

     

    • Moved by Ricky_Brundritt Saturday, March 10, 2012 10:53 AM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, September 6, 2011 2:39 PM

Answers

  • You may try using map.entities.get(index) method to get pushpin & call invoke() method of Events object to fire the click event on it. 
    MSFT
    Hemant Goyal
    • Marked as answer by JaviSRK Wednesday, September 7, 2011 8:35 PM
    Tuesday, September 6, 2011 11:36 PM

All replies

  • You may try using map.entities.get(index) method to get pushpin & call invoke() method of Events object to fire the click event on it. 
    MSFT
    Hemant Goyal
    • Marked as answer by JaviSRK Wednesday, September 7, 2011 8:35 PM
    Tuesday, September 6, 2011 11:36 PM
  • Exactly what I needed.  Thanks!

    Wednesday, September 7, 2011 8:36 PM