CODEWITHSUNDEEP
jqueryajaxjsonbing-maps
HungryDB
HungryDB

Reputation: 575

put pins and description box on a bing map using json

I want to integrate bing map on a web-page and also want to add dynamic pins and description box to the map. So i added this JS script.

var map = null;
var pinInfoBox;  //the pop up info box
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();

function getMap()
{
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'AlKxWcYscx4MaEZJeSsswwq2ZZ6U8QO283c0CCUL1opU-KJFxkA3C6qComzd5osp'});

    /* Ajax call to get pins */

    $.ajax({
           type: 'POST',
           url: 'api/getproperties.php',
           dataType: "json",
           data: {},
           success: function (response)
           {
             var pins = $.parseJSON(response);
             $.each(pins, function(pin) 
             {  
               var latLon = new Microsoft.Maps.Location(pin.Latitude,pin.Longitude);
               var newpin = new Microsoft.Maps.Pushpin(latLon);
               newpin.Title = pin.name;
               newpin.Description = "description here";
               pinLayer.push(newpin); 
               Microsoft.Maps.Events.addHandler(newpin, 'click', displayInfobox);
               map.entities.push(pinLayer);
               map.entities.push(infoboxLayer);
            });
        }
    });    

    /* end ajax call for property pins*/
}
function displayInfobox(e) 
{
    pinInfobox.setOptions({title: e.target.name, description: "description here", visible:true, offset: new Microsoft.Maps.Point(0,25)});
    pinInfobox.setLocation(e.target.getLocation());
}

function hideInfobox(e)
{
    pinInfobox.setOptions({ visible: false });
}

Ajax call is a success and this is the Json i am getting after ajax call. Map is displayed alright but pins are not added. what might be a problem here? Please suggest a solution.

 [{"loc_id":"L0002","Latitude":"53.136886","Longitude":"-7.689056","name":"demo"}
,{"loc_id":"L0004","Latitude":"-33.932079","Longitude":"18.428093","name":"demo1"}...more data]

Upvotes: 1

Views: 1195

Answers (1)

rbrundritt
rbrundritt

Reputation: 17954

Once you have the JSON data you will need to loop through each result and create a pushpin object using the Latitude and Longitude data. Since this information is a string in your response you will need to turn it into a number by using the parseFloat method. Here is a code sample of how to do this:

for(var i=0;i<data.length;i++){
    var loc = new Microsoft.Maps.Location(parseFloat(data[i].Latitude, parseFloat(data[i].Longitude);
    var pin = new Microsoft.Maps.Pushpin(loc);
    pin.Metadata = data[i];
    map.entities.push(pin);
}

Here are some additional resources:

http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins1

I also recommend taking a look at my free ebook that provides a lot of information on using the Bing Maps apis in Windows Store apps: http://rbrundritt.wordpress.com/my-book/

Upvotes: 1

Related Questions