Canadian Coder Canadian Coder - 2 years ago 98
Javascript Question

Pins disappearing on bing maps when map is panned

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() {
var pinImg = "images/MapPin.jpg";
var latLong = {};
var name;

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

latLong['latitude'] =[i].latitude;
latLong['longitude'] =[i].longitude;
name =[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' + i;

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

function displayName(e) {

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

if ( != -1) {
document.getElementById("name").innerHTML =;

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

//setTimeout(optimizeMap, 100);

window.onresize = 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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download