infoBubble nothing display on 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);

}

Success added the marker on map, unfortunately infoBubble nothing has shown? why?
and dont have any error on FireBug

UPDATE HOW TO CALL THE FUNCTION

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

UPPDATE For @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); 

    });

still can't close the infowindow,when clicked marker get this error

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

(82 out of range 43)

There is also discussion going on at http://stackoverflow.com/questions/15165007/google-maps-custom-infobox#comment21359522_15165007 you want to check out about style — Ankit, Mar 01 '13 at 21:07
@Ankit InfoBubble css style is more nicer than InfoBox, i dont like InfoBox — John Walker, Mar 01 '13 at 21:49
Chin Ye, we don't have choice here. You can not style Infowindow. If you want custom bubble than you have to go with infobox. — Ankit, Mar 02 '13 at 00:54

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

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

but looks like you want to style your infowindow than better use infobox instead of infowindow. Check you about InfoBox ->Styling InfoWindow with Google Maps API

You can add some html tags like br, bold to infowindow content but I think you can not style infowindow.

edited May 23 '17 at 10:25

Community

1
1

answered Mar 01 '13 at 20:28

Ankit

338
2
16

FireBug Error `Error: Invalid value for property : [object Object]` , my map is gmappanel v3 ,EXTJS 4 – John Walker Mar 01 '13 at 22:11
Ya I missed that sorry about that. More on Monday – Ankit Mar 02 '13 at 01:00
The problem is because we are passing extjs gmappanel instance instead of Google maps instance. you need to create Google maps instance with marker info you have and pass it inside infowindow.open – Ankit Mar 04 '13 at 18:23
when other check box are checked, and how to hide all info window? what i mean is,hide all infowindow first,then show the infowindow on addDoctorLocation. if not too many check box are checked, will show so much infowindow on google map – John Walker Mar 05 '13 at 00:53
`infowindow.open(gm, this);` @Ankit your code can work for open infowindow,but can't close the infowindow when click the x on the top right. – John Walker Mar 05 '13 at 06:48
try this [link](http://stackoverflow.com/questions/6441157/infowindow-closing-and-var-google-maps-api-v3) – Ankit Mar 05 '13 at 15:13
still can't close infowindow,see the above code i have updated – John Walker Mar 06 '13 at 03:24

score 0 · Answer 2 · answered Mar 07 '13 at 11:23

I try your example with google maps intstance and it works fine:

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

});
}

i think u should try to use EXTJS 4 GmapPanel instead of google map. — John Walker, Mar 07 '13 at 15:33

infoBubble nothing display on gmappanel - EXTJS 4

UPDATE HOW TO CALL THE FUNCTION

UPPDATE For @Ankit

2 Answers2