none
Search all pins on map RRS feed

  • Question

  • I'm trying to do something here that might not even be possible. In it's simplest terms, I have a text listing of the Points on the map and I want the map to present a custom DHTML info box when the text link is clicked on (something similar to this example: http://www.garzilla.net/vemaps/SideBar.aspx).

    I'm trying to pass the title attribute of a pin to a function and then run some code that will find the exact pin (based on title) and then send the pin info to another function that will present a custom info div (similar to infobox).

    The function below creates the pins as a an array slot within 'var group1 = []; '. So each 'layer' of info sits within an array element.

    Any steers would be appreciated!

    Thanks,

    Alan

    Heres the code that makes the points:

    function getMarks(url, number) {
      var request = newRequest();
      request.open("GET", url, false);
      request.setRequestHeader("User-Agent", "XMLHttpRequest");
      request.send(null);
      xmlDoc = request.responseXML;
      var MM = Microsoft.Maps;
      var x = xmlDoc.getElementsByTagName("markers")[0];
      makesidebar2(x, number);
    
      if (x) {
        var xNodes = x.childNodes;
        if (xNodes) {
          var pts = [];
          var pinloc = [];
          var pin = [];
    
          group1[number] = new MM.EntityCollection();
          group1[number].setOptions({ visible: false }); //remove previous layer, if a re-click
    
          for (var i = 0; i < xNodes.length; i++) {
            if (xNodes[i].nodeType == 1)// if the node is an ELEMENT_NODE (a TAG)
            {
              var lng = parseFloat(xNodes[i].getAttribute("lng"));
              var lat = parseFloat(xNodes[i].getAttribute("lat"));
              var name = xNodes[i].getAttribute("name");
              var address = xNodes[i].getAttribute("address");
    
              // Location(latitude:number, longitude:number, altitude?:number, altitudeMode?: AltitudeReference ) 
              pinloc[pts.length] = new MM.Location(lng, lat);
              pin[pts.length] = new MM.Pushpin(pinloc[pts.length], { text: number });
    
              pin[pts.length].title = name;
              Microsoft.Maps.Pushpin.prototype.description = null;
              pin[pts.length].description = address;
    
              MM.Events.addHandler(pin[pts.length], 'click', displayEventInfo);
              group1[number].push(pin[pts.length]);
            }
          }
          map.entities.push(group1[number]);
          group1[number].setOptions({ visible: true });
        }
      }
    }

    And here is the code that generates the side bar listing:

    function makesidebar2(markers, number) {
      var html = "";
      var xNodes = markers.childNodes;
      for (var i = 0; i < xNodes.length; i++) {
        if (xNodes[i].nodeType == 1)// if the node is an ELEMENT_NODE (a TAG)
        {
          var category = xNodes[i].getAttribute("category");
          html += '<li><a href="javascript:myclick(' + xNodes[i].getAttribute("name") + ')">' + xNodes[i].getAttribute("name") + ', ' + xNodes[i].getAttribute("address") + '<\/a></li>';
        }
      }
      sidearray[number] = '<h3>Category: ' + Rename(category) + '</h3></ br>';
      sidearray[number] += '<ol>';
      sidearray[number] += html;
      sidearray[number] += '</ol>';
      document.getElementById("side_bar").innerHTML += sidearray[number];
    }

    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:28 PM (From:Bing Maps: Map Control and Web services Development)
    Wednesday, May 11, 2011 10:18 AM

Answers

  • If you want a more detailed and working sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <title>Map with valid credentials</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
      </script>
      <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        var map = null;
    
        var locs = [];
    
        function getMap() {
          // Initialize the map
          map = new Microsoft.Maps.Map($('#map').get(0), {
            credentials: "Your Bing Maps Key",
            center: new Microsoft.Maps.Location(47.5, 2.75),
            zoom: 2,
            mapTypeId: Microsoft.Maps.MapTypeId.road
          });
    
          locs.push(new Microsoft.Maps.Location(6.8980, 126.5790));
          locs.push(new Microsoft.Maps.Location(6.6310, 126.8990));
          locs.push(new Microsoft.Maps.Location(6.7490, 126.8090));
          locs.push(new Microsoft.Maps.Location(-11.1600, 162.4400));
          locs.push(new Microsoft.Maps.Location(-14.9280, 167.1700));
          locs.push(new Microsoft.Maps.Location(56.7744, -153.2810));
          locs.push(new Microsoft.Maps.Location(48.8900, -129.3100));
          locs.push(new Microsoft.Maps.Location(13.0490, -88.6600));
          locs.push(new Microsoft.Maps.Location(-40.3440, 78.3620));
          locs.push(new Microsoft.Maps.Location(-3.9570, 101.7460));
          locs.push(new Microsoft.Maps.Location(-4.0220, 101.7760));
          locs.push(new Microsoft.Maps.Location(15.4020, -92.7180));
          locs.push(new Microsoft.Maps.Location(-11.6620, 166.3800));
          locs.push(new Microsoft.Maps.Location(-58.1610, -9.4720));
          locs.push(new Microsoft.Maps.Location(23.4190, 70.2320));
          locs.push(new Microsoft.Maps.Location(-0.6770, 133.3340));
          locs.push(new Microsoft.Maps.Location(51.4370, -177.7970));
          locs.push(new Microsoft.Maps.Location(13.6710, -88.9380));
          locs.push(new Microsoft.Maps.Location(-4.6800, 102.5620));
          locs.push(new Microsoft.Maps.Location(-19.4940, 177.3300));
          locs.push(new Microsoft.Maps.Location(-19.6910, 177.3900));
          locs.push(new Microsoft.Maps.Location(-7.1610, 117.4880));
          locs.push(new Microsoft.Maps.Location(53.9200, -133.6100));
          locs.push(new Microsoft.Maps.Location(-47.4560, 32.3860));
          locs.push(new Microsoft.Maps.Location(1.2710, 126.2490));
          locs.push(new Microsoft.Maps.Location(1.5550, 126.4310));
          locs.push(new Microsoft.Maps.Location(36.4240, 70.8810));
          locs.push(new Microsoft.Maps.Location(46.8150, 144.5250));
          locs.push(new Microsoft.Maps.Location(-21.9860, 170.2070));
          locs.push(new Microsoft.Maps.Location(-22.0020, 170.1080));
          locs.push(new Microsoft.Maps.Location(13.2830, -88.8270));
          locs.push(new Microsoft.Maps.Location(47.1490, -122.7267));
          locs.push(new Microsoft.Maps.Location(-54.5880, 157.2710));
          locs.push(new Microsoft.Maps.Location(-6.8100, -12.9110));
    
          $.each(locs, function () {
            map.entities.push(new Microsoft.Maps.Pushpin(this));
          })
    
          Microsoft.Maps.Events.addHandler(map, 'viewchange', setSideBar);
    
          setSideBar();
        }
    
        function setSideBar() {
          var content = "";
    
          var bounds = map.getBounds();
    			var minLongitude = bounds.getNorthwest().longitude;
    			var maxLongitude = bounds.getSoutheast().longitude;
    			if(maxLongitude < minLongitude)
    			{
    				$.each(locs, function () {
    					if ((this.latitude < bounds.getNorthwest().latitude) && (this.latitude > bounds.getSoutheast().latitude)) {
    						
    						if((this.longitude < maxLongitude) && (this.longitude > 0))
    							content += "<li lat='" + this.latitude + "' lng='" + this.longitude + "'>Element " + this.latitude + ";" + this.longitude + "</ li>";
    						
    						if((this.longitude > minLongitude) && (this.longitude < 180))
    							content += "<li lat='" + this.latitude + "' lng='" + this.longitude + "'>Element " + this.latitude + ";" + this.longitude + "</ li>";
    					}
    				});
    			} else {
    				$.each(locs, function () {
    					if ((this.latitude < bounds.getNorthwest().latitude) && (this.latitude > bounds.getSoutheast().latitude)) {
    						if ((this.longitude < maxLongitude) && (this.longitude > minLongitude)) {
    							content += "<li lat='" + this.latitude + "' lng='" + this.longitude + "'>Element " + this.latitude + ";" + this.longitude + "</ li>";
    						}
    					}
    				})
    			}
          
          $('#sidebar').empty().html(content);
    			$('#sidebar li').click(function(e) { map.setView({ zoom: 8, center:new Microsoft.Maps.Location($(this).attr('lat'), $(this).attr('lng')) }) })
        }    
    		
      </script>
    </head>
    <body onload='getMap()'>
      <div id="map" style="float: left; position: relative; width: 800px; height: 600px;">
      </div>
      <div>
        <ul id="sidebar">
        </ul>
      </div>
    </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Wednesday, May 11, 2011 4:57 PM
    Moderator

All replies

  • Here is a sample implementation, it does not include the mouseover behaviour neither the perfect case when the bounds is crossing the end of the hemisphere, but I think it might help you and might be a good starting point:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <title>Map with valid credentials</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
      </script>
      <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        var map = null;
    
        var locs = [];
    
        function getMap() {
          // Initialize the map
          map = new Microsoft.Maps.Map($('#map').get(0), {
            credentials: "Your Bing Maps Key",
            center: new Microsoft.Maps.Location(47.5, 2.75),
            zoom: 2,
            mapTypeId: Microsoft.Maps.MapTypeId.road
          });
    
          locs.push(new Microsoft.Maps.Location(6.8980, 126.5790));
          locs.push(new Microsoft.Maps.Location(6.6310, 126.8990));
          locs.push(new Microsoft.Maps.Location(6.7490, 126.8090));
          locs.push(new Microsoft.Maps.Location(-11.1600, 162.4400));
          locs.push(new Microsoft.Maps.Location(-14.9280, 167.1700));
          locs.push(new Microsoft.Maps.Location(56.7744, -153.2810));
          locs.push(new Microsoft.Maps.Location(48.8900, -129.3100));
          locs.push(new Microsoft.Maps.Location(13.0490, -88.6600));
          locs.push(new Microsoft.Maps.Location(-40.3440, 78.3620));
          locs.push(new Microsoft.Maps.Location(-3.9570, 101.7460));
          locs.push(new Microsoft.Maps.Location(-4.0220, 101.7760));
          locs.push(new Microsoft.Maps.Location(15.4020, -92.7180));
          locs.push(new Microsoft.Maps.Location(-11.6620, 166.3800));
          locs.push(new Microsoft.Maps.Location(-58.1610, -9.4720));
          locs.push(new Microsoft.Maps.Location(23.4190, 70.2320));
          locs.push(new Microsoft.Maps.Location(-0.6770, 133.3340));
          locs.push(new Microsoft.Maps.Location(51.4370, -177.7970));
          locs.push(new Microsoft.Maps.Location(13.6710, -88.9380));
          locs.push(new Microsoft.Maps.Location(-4.6800, 102.5620));
          locs.push(new Microsoft.Maps.Location(-19.4940, 177.3300));
          locs.push(new Microsoft.Maps.Location(-19.6910, 177.3900));
          locs.push(new Microsoft.Maps.Location(-7.1610, 117.4880));
          locs.push(new Microsoft.Maps.Location(53.9200, -133.6100));
          locs.push(new Microsoft.Maps.Location(-47.4560, 32.3860));
          locs.push(new Microsoft.Maps.Location(1.2710, 126.2490));
          locs.push(new Microsoft.Maps.Location(1.5550, 126.4310));
          locs.push(new Microsoft.Maps.Location(36.4240, 70.8810));
          locs.push(new Microsoft.Maps.Location(46.8150, 144.5250));
          locs.push(new Microsoft.Maps.Location(-21.9860, 170.2070));
          locs.push(new Microsoft.Maps.Location(-22.0020, 170.1080));
          locs.push(new Microsoft.Maps.Location(13.2830, -88.8270));
          locs.push(new Microsoft.Maps.Location(47.1490, -122.7267));
          locs.push(new Microsoft.Maps.Location(-54.5880, 157.2710));
          locs.push(new Microsoft.Maps.Location(-6.8100, -12.9110));
    
          $.each(locs, function () {
            map.entities.push(new Microsoft.Maps.Pushpin(this));
          })
    
          Microsoft.Maps.Events.addHandler(map, 'viewchange', setSideBar);
    
          setSideBar();
        }
    
        function setSideBar() {
          var content = "";
    
          var bounds = map.getBounds();
          
          $('#sidebar').empty();
    
          $.each(locs, function () {
            if ((this.latitude < bounds.getNorthwest().latitude) && (this.latitude > bounds.getSoutheast().latitude)) {
              if ((this.longitude < bounds.getSoutheast().longitude) && (this.longitude > bounds.getNorthwest().longitude)) {
                content += "<li>Element " + this.latitude + ";" + this.longitude + "</ li>";
              }
            }
          })
    
          $('#sidebar').html(content);
        }    
    		
      </script>
    </head>
    <body onload='getMap()'>
      <div id="map" style="float: left; position: relative; width: 800px; height: 600px;">
      </div>
      <div>
        <ul id="sidebar">
        </ul>
      </div>
    </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Wednesday, May 11, 2011 1:17 PM
    Moderator
  • Great, thanks. I never thought of that, passing the array of pins to the being able to query the lat and long.I'll give it a try!

    Thanks,

    Alan

    Wednesday, May 11, 2011 3:14 PM
  • If you want a more detailed and working sample:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <title>Map with valid credentials</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
      </script>
      <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        var map = null;
    
        var locs = [];
    
        function getMap() {
          // Initialize the map
          map = new Microsoft.Maps.Map($('#map').get(0), {
            credentials: "Your Bing Maps Key",
            center: new Microsoft.Maps.Location(47.5, 2.75),
            zoom: 2,
            mapTypeId: Microsoft.Maps.MapTypeId.road
          });
    
          locs.push(new Microsoft.Maps.Location(6.8980, 126.5790));
          locs.push(new Microsoft.Maps.Location(6.6310, 126.8990));
          locs.push(new Microsoft.Maps.Location(6.7490, 126.8090));
          locs.push(new Microsoft.Maps.Location(-11.1600, 162.4400));
          locs.push(new Microsoft.Maps.Location(-14.9280, 167.1700));
          locs.push(new Microsoft.Maps.Location(56.7744, -153.2810));
          locs.push(new Microsoft.Maps.Location(48.8900, -129.3100));
          locs.push(new Microsoft.Maps.Location(13.0490, -88.6600));
          locs.push(new Microsoft.Maps.Location(-40.3440, 78.3620));
          locs.push(new Microsoft.Maps.Location(-3.9570, 101.7460));
          locs.push(new Microsoft.Maps.Location(-4.0220, 101.7760));
          locs.push(new Microsoft.Maps.Location(15.4020, -92.7180));
          locs.push(new Microsoft.Maps.Location(-11.6620, 166.3800));
          locs.push(new Microsoft.Maps.Location(-58.1610, -9.4720));
          locs.push(new Microsoft.Maps.Location(23.4190, 70.2320));
          locs.push(new Microsoft.Maps.Location(-0.6770, 133.3340));
          locs.push(new Microsoft.Maps.Location(51.4370, -177.7970));
          locs.push(new Microsoft.Maps.Location(13.6710, -88.9380));
          locs.push(new Microsoft.Maps.Location(-4.6800, 102.5620));
          locs.push(new Microsoft.Maps.Location(-19.4940, 177.3300));
          locs.push(new Microsoft.Maps.Location(-19.6910, 177.3900));
          locs.push(new Microsoft.Maps.Location(-7.1610, 117.4880));
          locs.push(new Microsoft.Maps.Location(53.9200, -133.6100));
          locs.push(new Microsoft.Maps.Location(-47.4560, 32.3860));
          locs.push(new Microsoft.Maps.Location(1.2710, 126.2490));
          locs.push(new Microsoft.Maps.Location(1.5550, 126.4310));
          locs.push(new Microsoft.Maps.Location(36.4240, 70.8810));
          locs.push(new Microsoft.Maps.Location(46.8150, 144.5250));
          locs.push(new Microsoft.Maps.Location(-21.9860, 170.2070));
          locs.push(new Microsoft.Maps.Location(-22.0020, 170.1080));
          locs.push(new Microsoft.Maps.Location(13.2830, -88.8270));
          locs.push(new Microsoft.Maps.Location(47.1490, -122.7267));
          locs.push(new Microsoft.Maps.Location(-54.5880, 157.2710));
          locs.push(new Microsoft.Maps.Location(-6.8100, -12.9110));
    
          $.each(locs, function () {
            map.entities.push(new Microsoft.Maps.Pushpin(this));
          })
    
          Microsoft.Maps.Events.addHandler(map, 'viewchange', setSideBar);
    
          setSideBar();
        }
    
        function setSideBar() {
          var content = "";
    
          var bounds = map.getBounds();
    			var minLongitude = bounds.getNorthwest().longitude;
    			var maxLongitude = bounds.getSoutheast().longitude;
    			if(maxLongitude < minLongitude)
    			{
    				$.each(locs, function () {
    					if ((this.latitude < bounds.getNorthwest().latitude) && (this.latitude > bounds.getSoutheast().latitude)) {
    						
    						if((this.longitude < maxLongitude) && (this.longitude > 0))
    							content += "<li lat='" + this.latitude + "' lng='" + this.longitude + "'>Element " + this.latitude + ";" + this.longitude + "</ li>";
    						
    						if((this.longitude > minLongitude) && (this.longitude < 180))
    							content += "<li lat='" + this.latitude + "' lng='" + this.longitude + "'>Element " + this.latitude + ";" + this.longitude + "</ li>";
    					}
    				});
    			} else {
    				$.each(locs, function () {
    					if ((this.latitude < bounds.getNorthwest().latitude) && (this.latitude > bounds.getSoutheast().latitude)) {
    						if ((this.longitude < maxLongitude) && (this.longitude > minLongitude)) {
    							content += "<li lat='" + this.latitude + "' lng='" + this.longitude + "'>Element " + this.latitude + ";" + this.longitude + "</ li>";
    						}
    					}
    				})
    			}
          
          $('#sidebar').empty().html(content);
    			$('#sidebar li').click(function(e) { map.setView({ zoom: 8, center:new Microsoft.Maps.Location($(this).attr('lat'), $(this).attr('lng')) }) })
        }    
    		
      </script>
    </head>
    <body onload='getMap()'>
      <div id="map" style="float: left; position: relative; width: 800px; height: 600px;">
      </div>
      <div>
        <ul id="sidebar">
        </ul>
      </div>
    </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Wednesday, May 11, 2011 4:57 PM
    Moderator