none
add multiple pushpins to a map using bing map v8 RRS feed

  • Question

  • How to show multiple push pins  based of a set of lat/long values. Is it possible to do without using clustering layer.

    I like to do a simple for loop to dynamically create a push pin with various the lat/long vales set map view to these push pins. These pins will located closer as the lat/longs is derived from a city search.

    I am also looking at a infobox on these push pins on mouse hover.

    thanks.

    Wednesday, September 7, 2016 7:16 PM

Answers

All replies

  • Can you provide more details, it isn't clear what you are trying to do. You can easily create pushpins from lat/lon information and overlay them on the map. Simply loop over each set of lat/lon values and create a Location object, then use that to create a pushpin. You can then add the pushpin to the map or to an array and add the array to the map all at once (makes no difference). Here is a simple code sample:

    var latlons = [{lat:45, lon:-110},....];
    
    for(var i=0,len = latlons.length;i<len;i++){
        var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latlongs[I].lat, latlongs[I].lon));
        map.entities.push(pin);
    }

    Here are a bunch of useful resources:

    Interactive code samples: http://www.bing.com/api/maps/sdk/mapcontrol/isdk#addDefaultPushpin+JS

    MSDN Documentation:

    https://msdn.microsoft.com/en-US/library/mt712640.aspx

    https://msdn.microsoft.com/en-us/library/mt712674.aspx


    [Blog] [twitter] [LinkedIn]

    Wednesday, September 7, 2016 8:33 PM
  • I have multiple pushpins working now.

    I have 2 issues :

    1. I am using custom icons for pushpins and I need to display dynamic number on it. I am using 'text' property of the pushpin, but it displays in white color. Is it possible to change to black?

    2. I am displaying infobox on mouseover event of the pushpin. This box is getting cut off if it has to display outside of the map bounds. I need the infobox to stay on top all the time. How can I do that.

    here is my code:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script  type='text/javascript'  src='http://www.bing.com/api/maps/mapcontrol'></script> 
        <script type='text/javascript'>
    
            var infobox, map;
            var lat = 42.8607025; var long = -83.01992;
            var strPinNum = "";
            var arrPoints = new Array();
            var strPushPinImage = "images/MIMMapMarkerGreen.png";
            //Define an HTML template for a custom infobox.
            var infoboxTemplate = '<div class="customInfobox" style="width:250px;background: white;border: 1px solid #cecece;align:center;font-family:Arial; font-size:x-small;">{description}</div>';
    
           function GetMap() {
               map = new Microsoft.Maps.Map('#myMap', {
                   credentials: 'Bing Maps Key
               });
    
               for (var i = 0; i < 5; i++) {
                   if (i == 0) {
                       lat = 42.5063018798828; long = -83.35019683837892;
                       strPushPinImage = "images/MIMMapMarkerGreen.png";
                   }
                   if (i == 1) {
                       lat = 42.445137; long = -83.51759;
                       strPushPinImage = "images/MIMMapMarkerYellow.png";
                   }
                   if (i == 2) {
                       lat = 42.44214; long = -83.441185;
                       strPushPinImage = "images/MIMMapMarkerBlue.png";
                   }
                   if (i == 3) {
                       lat = 42.4517365; long = -83.51924;
                   }
                   if (i == 4) {
                       lat = 42.44695; long = -83.5134659;
                   }
    
                   var ll = new Microsoft.Maps.Location(lat, long);
    
                   arrPoints[i] = ll;
    
                   var center = map.getCenter();
    
                   strPinNum = "" + (i + 1);
    
                   //Add description for the infobox.               
                   var description = GetMapBubbleInfoByProp(i+1);
    
                   //Pass the title and description into the template and pass it into the infobox as an option.
                   infobox = new Microsoft.Maps.Infobox(center, {
                       htmlContent: infoboxTemplate.replace('{description}', description),
                       visible: false
                   });
    
                   //Assign the infobox to a map instance.
                   infobox.setMap(map);
    
                   //Create custom Pushpin
                   var pin = new Microsoft.Maps.Pushpin(ll, {
                       icon: strPushPinImage,
                       text: strPinNum,
                       subTitle:1,
                       textOffset: new Microsoft.Maps.Point(0, 1),
                   });
    
                   //Store some metadata with the pushpin.
                   pin.metadata = {
                       title: 'Pin Title',
                       description: 'Pin discription'
                   };
    
                   //Add a click event handler to the pushpin.
                   Microsoft.Maps.Events.addHandler(pin, 'mouseover', displayInfobox);
                   Microsoft.Maps.Events.addHandler(pin, 'mouseout', closeInfoBox);
                   //Add the pushpin to the map
                   map.entities.push(pin);
               }
           }
    
           function closeInfoBox() {
               //Close the infobox           
               infobox.setOptions({
                   visible: false
               });           
           }
    
           function displayInfobox(e) {
               //Make sure the infobox has metadata to display.
               if (e.target.metadata) {
                   //Set the infobox options with the metadata of the pushpin.
                   infobox.setOptions({
                       location: e.target.getLocation(),
                       title: e.target.metadata.title,
                       description: e.target.metadata.description,
                       visible: true
                   });
               }
           }
    
           function GetMapBubbleInfoByProp(i) {
    
               var strMapBubble = "";
               var strSpLp = "";
               var strLeaseSale = "";
               var strbgColor = "#4094e6";    //"Navy";
               var strStatusDesc = "";
               var strPushPinText = "Pushpin ";
               var strForeColor = "black";
    
               strStatusDesc = "ACTV";
               strbgColor = "#fcfe41";
               strForeColor = "black";
               strStatusDesc = "PENDING";
               strLeaseSale = "";
               strSpLp += "";
    
               strStatusDesc = "FOR SALE";
               strPushPinText = "";
    
               var strTitleBarAddress = strStatusDesc + "<BR>25751 Abbey Dr<BR>" + strSpLp;
    
               var strDetailParams = "<a style='cursor:hand' id='lnkPhoto' onclick= 'test()' class='thickbox'>";
    
               strMapBubble = "<TABLE cellspacing='0' cellpadding='1' >" +
                   "<tr bgcolor='" + strbgColor + "'><td style='color:" + strForeColor + ";font-weight:bold;' colspan='2' valign=top>" + strPushPinText + "#" + (i) + "<span style='padding-left:180px'><a href=# onclick='closeInfoBox()'>Close</a></span><br>" + strTitleBarAddress + "</td></tr><TR><TD  VALIGN='TOP' ALIGN='LEFT'><img style='width:18px;height:29px;padding:3px;' src='" +
                    "images/MIMMapMarkerGreen.png" +
                   "'></TD><TD valign='top' ALIGN='LEFT' nowrap>" +
                   "<BR>MLS ID: 25478954" +
                   "<BR>Style: OVER" +
                   "<BR>Bedrooms:4 " +
                   "<br>Baths/Lavs: 2" +
                   "<br>Sq. Feet: 7000 " +
                   "</TD></TR>" +
                   "<TR id='trRemarks'><TD COLSPAN='2' wrap><br>" +
                   "test for the bing map 7.0 API. we are goin to be migrating to google maps pretty soon " +
                   "test for the bing map 7.0 API. we are goin to be migrating to google maps pretty soon " +
                   "test for the bing map 7.0 API. we are goin to be migrating to google maps pretty soon " +               
                   "...</TD>" +
                   "</tr>";
    
               strMapBubble += "<tr><td><br>" + strDetailParams + "<a href='http://www.moveinmichigan.com' target='_blank'>Detail View</a></td></tr>" +
                   "</TABLE>";
                       
               return strMapBubble;
    
           }            
    
        </script>
    </head>
    <body onload ="GetMap()">
        <div id="myMap" style=";width:600px;height:400px;margin:200px"></div>
    </body>
    </html>
    


    Thursday, September 8, 2016 2:10 PM
  • 1) Currently there is no option to change the default font/color of the pushpin text. That said, you can create custom pushpin icons in a number of different ways. An SVG or a canvas would give you full control over the rendering. Take a look at these examples: https://msdn.microsoft.com/en-US/library/mt712640.aspx

    2) This is by design. All elements in the map are limited to the map frame. I am however having the team look into making an exception for the infobox class. No time line on when this will be available.


    [Blog] [twitter] [LinkedIn]

    Friday, September 9, 2016 1:15 AM
  • is this still worked?
    Tuesday, August 28, 2018 3:50 AM