Bing! Map How to create an info box popup

Question

I have a pin on my Bing! version 7 map although I'm failing to find out how to create an onclick event to display an info box !

Can anyone point me in the right direction or provide an example?

I have the following code so far! I need the popup to overlay the map panel.

Many thanks as always!

      var map = null;

      function GetMap() {
            map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'xxx' });
            map.entities.clear();

            var pushpinOptions = { icon: 'icon.png', width: 53, height: 61 };
            var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);

            var infoboxOptions = {title:'Infobox Title', description:'Infobox description'}; 

            var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );    
            map.entities.push(defaultInfobox);
            map.entities.push(pushpin);
        }

Solution 1

This page on the Bing sdk site has plenty of example with the code samples below the map:

http://www.bingmapsportal.com/isdk/ajaxv7

Solution 2

Here's an example from MSDN http://msdn.microsoft.com/en-us/library/gg508987.aspx

Comments

[James Radford]

thanks for this, although it doesn't actually show how to create a popup when clicking or hovering over the pin?

[Ryan Olds]

Lower down on that page is a section called "Attach map events". That has code for attaching events to the maps. The "Pushpin" section has example for attaching a click as well.