Bing Map - placing multiple pins

JavaScript
1

Hi!
I have a Bing Map which I have created and it does everything I need it to do, if I am only needing it to display 1 pin on the map - which Im not.

Just now I connect my Map to a database which pulls out the Longitude and Latitude, it then swaps the string in to the javascript i.e.

var loc = new Microsoft.Maps.Location(POINT_LATITUDE, POINT_LONGITUDE);

it then places the pin on the map i.e.

pin.push(new Microsoft.Maps.Pushpin(loc));

But what I need to do is read the database and store the information for each location, which will eventually display an information bubble as well.

Here is the code I have just now which works for pulling out 1 location.


 const string MAP_JAVASCRIPT = @"<script type=""text/javascript"">
       		

        function GetMap_NAMING_ID() {
		
        //Initialize the map
        map = new Microsoft.Maps.Map(document.getElementById('NAMING_ID'),
        {credentials:'My_Bing_Key',
        mapTypeId: Microsoft.Maps.MapTypeId.auto});
		

        // Get number of locations in the Location DB
        var locationCount = COUNTER_NUM;



        // Create the locations
        var loc = new Microsoft.Maps.Location(POINT_LATITUDE, POINT_LONGITUDE);
        var loc2 = new Microsoft.Maps.Location(51.900223473309865,8.4759521484375);
        var loc3 = new Microsoft.Maps.Location(56.511017504952136,-6.92138671875);





        var pin = new Microsoft.Maps.EntityCollection();

        pin.push(new Microsoft.Maps.Pushpin(loc));
        pin.push(new Microsoft.Maps.Pushpin(loc2));
        pin.push(new Microsoft.Maps.Pushpin(loc3));



        map.entities.push(pin);


		}
 $(function() { GetMap_NAMING_ID();});
		
		</script>";


 foreach (var item in myCollection)
            {

            Counter++;


            string Scounter = Convert.ToString(Counter);



            script = MAP_JAVASCRIPT.Replace("NAMING_ID", BingMapPanel1.ClientID);

            script = script.Replace("DASHBOARD_SIZE", DashboardSize);

            Latitude = item.GetValue("crtLatitude").ToString();
            script = script.Replace("POINT_LATITUDE", Latitude);

            Longitude = item.GetValue("crtLongitude").ToString();
            script = script.Replace("POINT_LONGITUDE", Longitude);

            script = script.Replace("ZOOM_LEVEL", Zoom);

            Location = item.GetValue("Title").ToString();
            script = script.Replace("POINT_TITLE", Location);

            script = script.Replace("POINT_ADDRESS", Street);
            script = script.Replace("POINT_CITY", City);
            script = script.Replace("POINT_STATE", State);
            script = script.Replace("POINT_ZIPCODE", Zipcode);
            script = script.Replace("COUNTER_NUM", Scounter);

        }

            // only register global bing map script once


            if (!Page.IsClientScriptBlockRegistered("Bing.Map.Script"))
                Page.ClientScript.RegisterClientScriptInclude("Bing.Map.Script", "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0");

            // render this widgets map script
            Page.ClientScript.RegisterStartupScript(typeof(BingLocationMap), BingMapPanel1.ClientID, script, false);

For the code above, I’ve hard coded the 2 extra locations but ideally I would want to have something like var loc[i] = new Microsoft.Map.Location(Lat,Long); so that I could populate it with as many or as few locations as I want.

I think I need to do a foreach loop within the javascript but Im not 100% how to go about this, do I need an arraylist?

Im using ASP.net, C# and Javascript.

Can anyone help or point me in the right direction.

Thanks

2

I’m another step forward. I found this website: http://www.hybridplanet.co.in/2012/02/how-to-add-multiple-pushpins-in-bing.html which is doing what I want to do, but its hardcoding the latitude and longitude in to the code.

If anyone can suggest how I go about populating the array via MyCollection items then that would be great!

3

Hi,

What you want to show?? just single pin or multiple pin.??

in my code i used hardcoding. if you want to pass the lat-lon value from database. then you have declare global variable in javascript like this:

[COLOR=“#0000CD”]<script type=“text/javascript”>

var lat = new Array();
var lon = new Array();

function AddLocationsInArray(lattitude,longitude)
{
lat[i] = lattitude;
lon[z] = longitude;
}

</script>[/COLOR]

call “AddLocationsInArray(lattitude,longitude)” through C# code behind LOOP:
your lat-lon value will be come from database.

[COLOR=“#006400”]FOR(loop start) {

this.Page.ClientScript.RegisterStartupScript(this.GetType(), “AddLocationsInArray”,“AddLocationsInArray(”<– YOUR LAT VALUE —>“,”<– YOUR LON VALUE —>“);”, true);

}[/COLOR]

in my hybridplanet page just modify the AddLocations() function

with this one

[COLOR=“#0000CD”]function AddLocations()
{
var i;
var z;

//Calculate the total pins in the array

var TotalPins = lat.length;

//Now add multiple pushpins and infobox on the map

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

     AddPushPins(lat[i], lon[i], "My Title", "This is infobox!");

   }

}

}[/COLOR]

I didnt tested the codes but i think this way will work…

Ashish
(Administrator - www.hybridplanet.co.in )