infoBubble没有显示在gmappanel上 - EXTJS 4

Question

function addDoctorLocation(options) 
{
    var gm = Ext.getCmp('mygooglemap');
    var mpoint = new google.maps.LatLng(options.lat,options.lng);
    var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
    infoBubble = new InfoBubble({
            map: gm,
            content: '<div class="phoneytext">Some label</div>',
            //position: new google.maps.LatLng(options.lat, options.lng),
            shadowStyle: 1,
            padding: '10px',
            //backgroundColor: 'rgb(57,57,57)',
            borderRadius: 5,
            minWidth: 200,
            arrowSize: 10,
            borderWidth: 1,
            borderColor: '#2c2c2c',
            disableAutoPan: true,
            hideCloseButton: false,
            arrowPosition: 7,
            backgroundClassName: 'phoney',
            pixelOffset: new google.maps.Size(130, 120),
            arrowStyle: 2
        });
        infoBubble.open(map, marker);

}

成功在地图上添加了标记，遗憾的是infoBubble没有显示？为什么呢？
并且在FireBug上没有任何错误

更新如何调用功能

tree.on('checkchange', function(node){
        var data = node.data;      
        if (data.checked == true){
        var lati,longi; 
        var record = MarkerStore.findRecord('MainID', data.MainID)
        if (record){
        lati = record.get('Latitude'); 
        longi = record.get('Longitude'); 
        }else{
        Ext.MessageBox.show({
        title: 'Error !',
        msg: 'No Record Found In Database ! <br />',
        icon: Ext.MessageBox.INFO
        }); 
        }       
        var options = {
        lat:lati,
        lng:longi,
        marker: {title:"Hello World!"},
        listeners: {
                     click: function(e){

                                         }
                    },
                    MainID: data.MainID     
        }     
        addDoctorLocation(options);  
        } else {
        markers[data.MainID].setMap(null);
    }   
    })

@Ankit的UPPDATE

var markers = {};
var openedInfoWindow = null;    
function addDoctorLocation(options) 
{
    var gm = Ext.getCmp('mygooglemap');
    var mpoint = new google.maps.LatLng(options.lat,options.lng);
    var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
    markers[options.MainID] = marker;

     var infowindow = new google.maps.InfoWindow({
        content: 'Hello !',
        maxWidth: 200
    });

    google.maps.event.addListener(marker, 'click', function() {
        // added next 4 lines

      google.maps.event.addListener(infowindow, 'closeclick', function() {
          openedInfoWindow = null;
      });

      if (openedInfoWindow != null) openedInfoWindow.close();  // <-- changed this
      openedInfoWindow = infowindow;
      infowindow.open(gm, marker); 

    });

仍然无法关闭infowindow，当点击标记时会出现此错误

TypeError: b.O is not a function
[Break On This Error]   

(82 out of range 43)

Answer 1

function addDoctorLocation(options) 
{
 var gm = Ext.getCmp('mygooglemap');
 var mpoint = new google.maps.LatLng(options.lat,options.lng);
 var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
 var infowindow = new google.maps.InfoWindow({content: "Some label"});    
 google.maps.event.addListener(marker, 'click', function(gm,marker) {
                    infowindow.open(gm, marker); // if still you can not open than use infowindow.open(gm, this)
            })
}

但看起来你想要设计你的infowindow，而不是更好地使用信息框而不是infowindow。检查InfoBox - ＆gt; Styling InfoWindow with Google Maps API

你可以添加一些html标签，比如br，粗体到infowindow内容，但我认为你不能设计infowindow样式。

Answer 2

我尝试使用google maps intstance的示例，它运行正常：

var markers = {};
var infowindow;
var openedInfoWindow = null;
var centerPointDefault = new google.maps.LatLng(39.739, -98.984);
function DrawMainMap(centerMap) {
    var myOptions = {
        center: centerMap,
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}
$(document).ready(function () {

var options = {
    lat: centerPointDefault.lat(),
    lng: centerPointDefault.lng(),
    marker: { title: "Hello World!" },
    listeners: {
        click: function(e) {

        }
    }
};

DrawMainMap(centerPointDefault);
addDoctorLocation(options);
}
function addDoctorLocation(options) {
var mpoint = new google.maps.LatLng(options.lat, options.lng);
var marker = new google.maps.Marker({
    position: mpoint
    });
marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
    content: 'Hello !',
    maxWidth: 200
});

google.maps.event.addListener(marker, 'click', function() {
    // added next 4 lines

    google.maps.event.addListener(infowindow, 'closeclick', function() {
        openedInfoWindow = null;
    });

    if (openedInfoWindow != null) openedInfoWindow.close(); // <-- changed this
    openedInfoWindow = infowindow;
    infowindow.open(map, marker);

});
}