View Full Version : Tooltip not positioning into target container

12 Nov 2010, 2:22 AM
I have a Google Map being rendered into a Panel in a viewport configuration, and a Google Marker also being drawn onto the map.

I also would like an Ext Tooltip to display at the same location as the marker on the map. I have already computed the X\Y values of where the Tooltip should appear using the Google Maps API.

In my drawMarker routine in my code below I am creating a new ToolTip instance and trying to get it to renderTo the panel's body so that when I call the showAt method on the Tooltip I can just use my computed X\Y values. (I have searched the forum and seen posts on using teh renderTo options)

But it seems to be ignoring my attempts (probably as I am making a mistake somewhere or not understanding this fully) and positions the ToolTip relative to the top left of the screen rather than the panel the map is rendered within.

I can actually get around this by grabbing the anchor XY position of the map panel and adding this to the computed XY values of the marker and it displays as exected, but this seems a bit long winded.



Workspace.GMapPanel = Ext.extend(Ext.Panel, {

initComponent : function() {


this._map = null;
this._overlay = null;

this.on( { 'afterrender': function() {
if (this._map==null) {
}, scope: this});

// Panel resize handling
this.on( { 'resize' : function(el,w,h) {
if (this._map!=null) {
if(h>0 && w>0) {
if (this._map!=null) {
var c=this._map.getDiv();
this.mapSize={width:w, height: h};

google.maps.event.trigger(this._map, 'resize');

} else {
this.mapSize={width:w, height: h};
}, scope: this});


initMap: function() {

var point = new google.maps.LatLng(50.7506,-1.92929);

this._map = new google.maps.Map(this.el.dom,{
zoom: 8,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP

//Need this object for accessing fromLatLngToContainerPixel routine for computing LatLng coordinates
//to a container pixel
MyOverlay.prototype = new google.maps.OverlayView();
MyOverlay.prototype.onAdd = function() { }
MyOverlay.prototype.onRemove = function() { }
MyOverlay.prototype.draw = function() { }
function MyOverlay(map) { this.setMap(map); }
this._overlay = new MyOverlay(this._map);

google.maps.event.addListener(this._map,"tilesloaded", Ext.createDelegate(this.drawMarker, this));
google.maps.event.addListener(this._map,"click", function() {return false;});


drawMarker: function() {

var unitMarker = new google.maps.Marker({
position: new google.maps.LatLng(50.7506,-1.92929),
map: this._map,
visible: true


var point = this._overlay.getProjection().fromLatLngToContainerPixel(unitMarker.getPosition());

//var xyPanelAnchor = this.getEl().getAnchorXY();

new Ext.ToolTip({
renderTo: this.el.dom,
html: 'Test',
dismissDelay: 0



Ext.reg('gmappanel', Workspace.GMapPanel);

Can someone please assist?


12 Nov 2010, 7:56 AM
Have you tried using anchorToTarget: true as a config option to the tooltip?

new Ext.ToolTip({
target: yourTarget,
anchorToTarget: true,