javascript - Bing Maps v7 で複数の情報ウィンドウを作成し、ピンに固有のデータを表示する

Question

私は現在、Bing Maps API を学習しようとしています。現在、そのピン データを含む情報ウィンドウを表示するためにホバーできる複数のピンを含むマップを作成しようとしています。現時点では、いくつかの問題が発生しています。誰かが次の点を助けることができれば、それは素晴らしいことです:

1. ピンをマウスから離しても、情報ウィンドウが削除されませんか?
2. addPin() で取得したデータを使用して、必要な情報ウィンドウに入力するにはどうすればよいですか?
3. createInfoBox() では、マップが移動したときにアクティブな情報ウィンドウを非表示にしたいのですが、マップが移動していなくてもトリガーされるようです?
4. 私にできる改善点があれば教えてください

jsfiddle : http://jsfiddle.net/kyllle/vpepD/23/および以下の JS

JS

var dealerMap = {        

        createInfoBox: function(infobox) {

            var instance = this,
                pushpin = infobox;

            // Now create infowindows
            var NewWindow = new Microsoft.Maps.Infobox(pushpin.getLocation(), {
                title: 'title',
                offset: new Microsoft.Maps.Point(-3, pushpin.getHeight() - 5),
                zIndex: 999,
                visible: true
            });

            //Display infowindow
            instance.displayInfoBox(NewWindow, pushpin);

            //Hide infowindow if map is moved - currently gets run without moving map
            //Microsoft.Maps.Events.addHandler(dealerMap.myMap, 'viewchange', instance.hideInfoBox(NewWindow));

        },

        displayInfoBox: function(infobox, pin) {

            var instance = this;

            //Show updated infowindow
            dealerMap.myMap.entities.push(infobox);

            //Mouse out handler to remove window
            Microsoft.Maps.Events.addHandler(pin, 'mouseleave', function() {        
                instance.hideInfoBox(NewWindow);
            });
        },

        hideInfoBox: function(infobox) {

            var instance = this;

            console.log('this was called');
            dealerMap.myMap.entities.remove(infobox);

        },

        addPin: function() {

            var instance = this;

            //make $.ajax json call            
            var response = data.dummy;

            //on success make each pin with returned data
            for (var i = 0, len = response.length; i < len; i++) {    

                var responseItem = response[i],
                    pinLocation = new Microsoft.Maps.Location(responseItem.lat, responseItem.long);                       

                //Create new pin
                var NewPin = new Microsoft.Maps.Pushpin(pinLocation, {
                    icon: 'http://www.kylehouston.com/testing/sportscar_' + responseItem.id +'.png',
                    width: 32,
                    height: 37
                });    

                //Push new pin onto map
                this.myMap.entities.push(NewPin);          

                //Event handlers to show and hide requested infowindow information
                Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', function(e) {
                    console.log(this);
                    dealerMap.createInfoBox(e.target);
                });
            }                      
        },

        init: function() {

            var instance = this;

            var mapOptions = {
                credentials: "AvGoKWSuMorGQb5h4UyyatCBGmGzSZe7-dWQMzXt4qqz6mV_WCC5m-paxvQhednd",
                center: new Microsoft.Maps.Location(37.09024, -95.712891),
                zoom: 5,
                enableClickableLogo: false,
                enableSearchLogo: false
            }

            dealerMap.myMap = new Microsoft.Maps.Map(document.getElementById('mapDiv'), mapOptions);

            //now add some pins
            instance.addPin();           



        }

    }

    dealerMap.init();


});