Pins disappearing on bing maps when map is panned

Question

I'm trying to produce a mapping application with Bing Maps with a button that will retrieve a JSON string and places pins on the map based on the center of the map.

That is working fine, but I'm running into two issues that I'm having trouble diagnosing.

The first is that when I move the map after placing the pins, the majority of them disappear from the map except for 1-3. I've figured out that the pins are still being held in map.entities, but just aren't all displaying.

The second issue is that I have a click event on the pins, and sometimes when I click on a pin it will disappear (and sometimes reappear elsewhere on the map).

Here is my code:

function addPin() {
    map.entities.clear();    
    var pinImg = "images/MapPin.jpg";    
    var latLong = {};
    var name;   

    for (var i = 0; i < factualJson.response.data.length; ++i) {

        latLong['latitude'] = factualJson.response.data[i].latitude;
        latLong['longitude'] = factualJson.response.data[i].longitude;
        name = factualJson.response.data[i].name;

        var pin = new Microsoft.Maps.Pushpin(latLong, {
            icon: pinImg,
            anchor: new Microsoft.Maps.Point(latLong['latitude'], latLong['longitude']),
            draggable: true,
            width: 48,
            height: 48
        });

        Microsoft.Maps.Events.addHandler(pin, 'click', displayName);
        pin.title = name;
        pin.id = 'pin' + i;
        map.entities.push(pin);             
    }

    document.getElementById("arrayLength").innerHTML = "Number of locations: " +            map.entities.getLength();     
}

function displayName(e) {

    document.getElementById("name").innerHTML = "";

    if (this.target.id  != -1) {        
        document.getElementById("name").innerHTML = this.target.title;
    }
}

function boot() {
    Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', { callback: getMap });    
}

function getMap() {    
    map = new Microsoft.Maps.Map($gel("bingMap"), {
        credentials: getKey(),
        customizeOverlays: true,
        enableClickableLogo: true,
        enableSearchLogo: true,
        showDashboard: true,
        showBreadcrumb: true,
        showCopyright: true,
        zoom: 10,
        labelOverlay: Microsoft.Maps.LabelOverlay.hidden
    });        

    setGeoLocation();
    //setTimeout(optimizeMap, 100);

    window.onresize = resizeWin;
    resizeWin();
}

Currently I make an ajax call from the button, and the callback function calls 'AddPin' which adds the pins to the map. I thought I'd add in the map initialization code in case it was relevant. Currently boot() is called on body load.

Answer 1

As always I need to ask the question before I figure it out myself.

The issue was that I needed to push a Microsoft location object into the pin and not an object. Like so:

var loc = new Microsoft.Maps.Location(47.592, -122.332);

And NOT my latLong object.

This also seemed to fix the issue of disappearing pins on click event.

Answer 2

For me the solution was similar to yours @canadian coder

Microsoft.Maps.Location() only accepts float values, no strings and Int.

I use MVC architecture and passed a string using a model. Later i converted that string to float and passed to Location. Problem solved.

var pushpin = new Microsoft.Maps.Pushpin(
center, { icon: '/Content/BingPushpin.png', width: 50, height: 50, draggable: false });
pushpin.setLocation(new Microsoft.Maps.Location
(parseFloat(@Model.Latitude) , parseFloat(@Model.Longitude))); 
dataLayer.push(pushpin); 
locations.push(new Microsoft.Maps.Location
(parseFloat(@Model.Latitude) , parseFloat(@Model.Longitude)));

EDIT :

Later found out that problem still exist. Another reason can be that you are calling that Map to load twice. So check for any other instance of the map which is being loaded. In my case see below.

$(document).ready(function () {
loadSearchModule(); //calling Map to Load at a div without pushpins

//code to do something

getMapOnLocation();
}

function getMapOnLocation()
{//code to display map with pushpin
}

In the Above example I was telling the control to load my map with PushPins and when the page is fully Loaded load the map without pushpins. Hope this helps :)