gmpanel 上没有显示 infoBubble - 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

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); 

    });

仍然无法关闭信息窗口，点击标记时出现此错误

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)
            })
}

但看起来您想要设置信息窗口的样式而不是更好地使用信息框而不是信息窗口。检查你的信息框 ->Styling InfoWindow with Google Maps API

您可以在信息窗口内容中添加一些 html 标签，如 br、粗体，但我认为您不能设置信息窗口的样式。

Answer 2

我用谷歌地图实例尝试你的例子，它工作正常：

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);

});
}