infoBubble ничего не отображает на gmappanel - EXTJS 4

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)

google-maps javascript extjs infobubble extjs4
person John Walker    schedule 01.03.2013    source источник
comment
Как вы вызываете addDoctorLocation в своем коде?   -  person Ankit    schedule 01.03.2013
comment
@Ankit Обновленный код..   -  person John Walker    schedule 02.03.2013
comment
Попробуйте мой ответ, опубликованный ниже, и ознакомьтесь с другими деталями.   -  person Ankit    schedule 02.03.2013
comment
Также ведется обсуждение на stackoverflow.com/questions /15165007/ вы хотите узнать о стиле   -  person Ankit    schedule 02.03.2013
comment
Стиль CSS @Ankit InfoBubble лучше, чем InfoBox, мне не нравится InfoBox   -  person John Walker    schedule 02.03.2013
comment
Чин Йе, у нас нет выбора. Вы не можете стилизовать Infowindow. Если вам нужен собственный пузырь, вам нужно использовать информационное окно.   -  person Ankit    schedule 02.03.2013

Ответы (2)


arrow_upward
0
arrow_downward 

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

но похоже, что вы хотите стилизовать свое информационное окно, чем лучше использовать информационное окно вместо информационного окна. Узнайте о InfoBox - Стили InfoWindow с API Google Maps

Вы можете добавить некоторые html-теги, такие как br, жирный шрифт, к содержимому информационного окна, но я думаю, что вы не можете стилизовать информационное окно.

person Ankit    schedule 01.03.2013
comment
Ошибка FireBug Error: Invalid value for property <map>: [object Object], моя карта gmappanel v3, EXTJS 4 - person John Walker; 02.03.2013
comment
Я пропустил это, извините за это. Подробнее в понедельник - person Ankit; 02.03.2013
comment
Проблема в том, что мы передаем экземпляр extjs gmappanel вместо экземпляра карт Google. вам нужно создать экземпляр Google Maps с имеющейся у вас информацией о маркере и передать ее внутри infowindow.open - person Ankit; 04.03.2013
comment
когда установлен другой флажок, и как скрыть все информационное окно? я имею в виду, сначала скройте все информационные окна, а затем покажите информационное окно на addDoctorLocation. если не слишком много флажков, будет отображаться столько информационного окна на карте Google - person John Walker; 05.03.2013
comment
infowindow.open(gm, this); @Ankit, ваш код может работать для открытия информационного окна, но не может закрыть информационное окно, если щелкнуть x в правом верхнем углу. - person John Walker; 05.03.2013
comment
попробуйте эту ссылку - person Ankit; 05.03.2013
comment
все еще не могу закрыть информационное окно, см. приведенный выше код, который я обновил - person John Walker; 06.03.2013

arrow_upward
0
arrow_downward

Я пробую ваш пример с экземпляром Google Maps, и он отлично работает:

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

});
}
person Дария Печайко    schedule 07.03.2013
comment
я думаю, вам следует попробовать использовать EXTJS 4 GmapPanel вместо карты Google. - person John Walker; 07.03.2013