none
Adding info into multiple display infoboxs RRS feed

  • Question

  • I have code that adds a pushpin to an address and adds info to this pushpin.  The problem I have is it shows the sam info for all the pushpins, and I can not have different info for each pushpin,  Below is the code if anyone could help

    THanks in advance

    <!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>

    <script type="text/javascript" src="</script">http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

    <script type="text/javascript">
     var map = null;
     var infobox = null;
     var dataLayer = null;
     var title;
     var info;
     var TotalPins;
     var counter;
     
     function GetMap() {
    // Initialize the map
     map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                      { credentials: "enterkey", mapTypeId:Microsoft.Maps.MapTypeId.road });
     
      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, 30) });
     
     infoboxLayer.push(infobox);
     
         //AddPushPins("28.474", "77.081", "My Title", "This is infobox!");//Lattitude, Longitude
         StoreLocations()
    }


        // This is a generic function to call a REST service and insert the JSON
        // results into the head of the document
    function CallRestService(request)
    {
          var script = document.createElement("script");
          script.setAttribute("type", "text/javascript");
          script.setAttribute("src", request);
          var dochead = document.getElementsByTagName("head").item(0);
          dochead.appendChild(script);
    }     
    function GeocodeCallback(result)
    {
     // Check that we have a valid response
     if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0)
     {
      //alert(counter);
            // Create a Location based on the geocoded coordinates
            var coords = result.resourceSets[0].resources[0].point.coordinates; //Gets Lat Long
            //AddPushPins(coords[0], coords[1], "My Title", "This is infobox!");//Lattitude, Longitude
            AddPushPins(coords[0], coords[1], title, info);//Lattitude, Longitude
          }
    }

    function AddPushPins(Lattitude, Longitude, PinTitle, PinDesc)
    {
     var myPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(Lattitude, Longitude));
     var loc = new Microsoft.Maps.Location(Lattitude, Longitude);
     
     myPin.Title = PinTitle;
     myPin.Description = PinDesc;
                     
     Microsoft.Maps.Events.addHandler(myPin, 'click', function (e) { displayInfobox(e, loc) });
     dataLayer.push(myPin);
    }

    function displayInfobox(e,loc)
    {
     if (e.targetType == 'pushpin')
     {
      infobox.setLocation(e.target.getLocation());
      infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
     }
    }

    function StoreLocations()
    {
     var addressLine = new Array(); // Street Address
     var locality = new Array(); // City or town name
     var postalCode = new Array(); //Postcode
     var MyTitle = new Array();
     var MyInfo = new Array();
     var credentials = "enterkey";
     var i, z;

     addressLine[0] = "1 Microsft Way."; // Street Address
     locality[0] = "Redmond"; // City or town name
     postalCode[0] = "98052" //Postcode
     MyTitle[0]= "Costco Event";
     MyInfo[0]= "2 Microsoft Way., Redmond, 98052";

     addressLine[1] = "1 Microsoft Way"; // Street Address
     locality[1] = "Redmond"; // City or town name
     postalCode[1] = "98052"; //Postcode
     MyTitle[1]= "Costco Event";
     MyInfo[1]= "1 Microsoft Way, Redmond, 98052";

     //Calculate the total pins in the array
     TotalPins = addressLine.length;
    counter=0;
     //Now add multiple pushpins and infobox on the map
     for (i = 0; i < TotalPins; i++)
     {
      counter=counter+1
       title=MyTitle[i];
       info=MyInfo[i];
      //for(z=0;z<=i;z++)
      //{

       var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?&addressLine=" + addressLine[i] + "&locality=" + locality[i] + "&postalCode=" + postalCode[i] + "&key=" + credentials + "&jsonp=GeocodeCallback"; // GeocodeCallback function will be called after the geocode service returns its results

       CallRestService(geocodeRequest);
         //alert("i")
      //}
     }
    }
     
    </script>
    </head>
     
    <body onload="GetMap();">
    <div id='myMap' style="position:relative;width:800px;height:600px;"></div>    
    </body>
    </html>




    • Edited by Joe Medford Thursday, August 16, 2012 10:12 PM
    Thursday, August 16, 2012 10:00 PM

Answers

  • The issue you are having is being caused by the asynchronous calls being made inside of a for loop. I would recommend storing your data array as a global property and then passing in the index of each location into the geocode request as a jsonso paramter (http://msdn.microsoft.com/en-us/library/ff701701.aspx). The index will then be available as a second returned parameter in your callback method. You can then use this to get the property title and description from your original data array.

    http://rbrundritt.wordpress.com

    Friday, August 17, 2012 5:04 PM

All replies

  • The issue you are having is being caused by the asynchronous calls being made inside of a for loop. I would recommend storing your data array as a global property and then passing in the index of each location into the geocode request as a jsonso paramter (http://msdn.microsoft.com/en-us/library/ff701701.aspx). The index will then be available as a second returned parameter in your callback method. You can then use this to get the property title and description from your original data array.

    http://rbrundritt.wordpress.com

    Friday, August 17, 2012 5:04 PM
  • Thanks for the info.  I have looked at that page, which gives examples for XML not javascript.  I tried adding it to the end of the line,   var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?&addressLine=" + addressLine[i] + "&locality=" + locality[i] + "&postalCode=" + postalCode[i]  + "&jsonp=GeocodeCallback&jsonso='abc'&key=" + credentials;

    But not sure what to do.

    ANy examples in NON XML would help.

    Thanks

    Friday, August 17, 2012 6:05 PM
  • This has nothing to do with JSON/XML responses. The sample did have a JSON response. What you need to do is in your callback method have a second parameter like this:

    function GeocodeCallback(result, index){

    //your Logic

    }


    http://rbrundritt.wordpress.com

    Saturday, August 18, 2012 12:35 PM
  • thanks for the information,  Usually i pass information into parameters of a funtion, I am not sure how this section parameter will help.

    below is the code I currently have.  I normally don't write complex code[getting a little mixed up],  and I usaully work on creating desktop programs rather then web based programs.   I appreciate all your help 

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function GeocodeCallback(result, index)
    {
     // Check that we have a valid response
     if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0)
     {
            // Create a Location based on the geocoded coordinates
            var coords = result.resourceSets[0].resources[0].point.coordinates; //Gets Lat Long
            //AddPushPins(coords[0], coords[1], "My Title", "This is infobox!");//Lattitude, Longitude
          }
    }

    //////Below is the code in the main funtion///////

     addressLine[0] = "2 Microsoft Way"; // Street Address
     locality[0] = "Redmond"; // City or town name
     postalCode[0] = "98052" //Postcode
     MyTitle[0]= "Costco Event";
     MyInfo[1]= "2 Microsoft Way, Redmond, 98052";

     addressLine[1] = "1 Microsoft Way"; // Street Address
     locality[1] = "Redmond"; // City or town name
     postalCode[1] = "98052"; //Postcode
     MyTitle[1]= "Costco Event";
     MyInfo[1]= "1 Microsoft Way, Redmond, 98052";

     //Calculate the total pins in the array
     TotalPins = addressLine.length;

     

      for(z=0;z<=i;z++)
      {

       var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?&addressLine=" + addressLine[i] + "&locality=" + locality[i] + "&postalCode=" + postalCode[i] + "&key=" + credentials + "&jsonp=GeocodeCallback"; // GeocodeCallback function will be called after the geocode service returns its results

       CallRestService(geocodeRequest);

      }

    Saturday, August 18, 2012 2:06 PM