Info box for Bing Maps

bing-maps, javascript, web-applications

Solution

your code works, I have tried it, as long as you only call `createMapPin()` once. But judging by your code your intent is to call `createMapPin()` multiple times, and this will cause the `infobox` to stop behaving like you think it would. The reason is this line:

pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
            { title: 'My Pushpin',
                description: 'This pushpin is located at (0,0).',
                visible: false,
                offset: new Microsoft.Maps.Point(0, 15)
            });

since you did not declare `pinInfobox` as a local variable via the `var` keyword, it implicitly gets declared as a global variable. I don't think this is your intent, because as soon as you call `createMapPin()` again, `pinInfobox`, because it is a global variable, will get overwritten. So in effect, even though you keep on creating new infoboxes, there is only one instance of it and it just keeps on getting assigned new values. So if you click on a pushpin, the one infobox probably pops up somewhere off screen and you don't see it. I believe your intent is to have one infobox associated with each pushpin? To do this, you need to declare the info box as a local variable, like so:

var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
        { title: 'My Pushpin',
            description: 'This pushpin is located at (0,0).',
            visible: false,
            offset: new Microsoft.Maps.Point(0, 15)
        });

You will also need to modify your event handlers to interact with the local version of the infobox object and not just the single global variable. The easiest way to do is to just declare your event handlers as anonymous functions in the scope of your `createMapPin()` function, and override the meaning of the this keyword using function binding:

Microsoft.Maps.Events.addHandler(pin, 'click', function (e) {
    this.setOptions({ visible: true });
} .bind(pinInfobox));
Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) {
    this.setOptions({ visible: false });
}.bind(pinInfobox));

so here is your updated code:

function createMapPin(latLong, sName) {
    var pinImg = "imagespins/Good.png";

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

    pin.title = sName;

    var pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(),
        {
            title: 'My Pushpin',
            description: 'This pushpin is located at (0,0).',
            visible: false,
            offset: new Microsoft.Maps.Point(0, 15)
        });

    // Add handlers for the pushpin events
    Microsoft.Maps.Events.addHandler(pin, 'click', function(e) {
        this.setOptions({ visible: true });
    }.bind(pinInfobox));
    // Hide the infobox when the map is moved.
    Microsoft.Maps.Events.addHandler(map, 'viewchange', function(e) {
        this.setOptions({ visible: false });
    }.bind(pinInfobox));
    map.entities.push(pin);
    map.entities.push(pinInfobox);
    return pin;
}

Problem

Original source