View Full Version : Ext.Panel as Google Maps InfoWindow

4 Nov 2009, 5:53 AM
Hi, I recently worked on a project involving Google Maps where we wanted it to integrate better with Ext JS. I took a little time to hack together this class that can basically be used like and InfoWindow but looks like an Ext JS Panel.

The code targets Ext JS 3.0 as well as version 3 of the Google Maps API. I haven't tested it with version 2 but there's probably around a one hundred percent chance it won't work. Anyways, it also requires the Prototype library, preferably version Version had a bug that caused some problems with Internet Explorer.

Screenshots and code are attached. Use it exactly like a google.maps.InfoWindow. With some exceptions.

To initialize it call something like
var info = new InfoPanel({ whatever_options_you_want });
To set the title call
The actually InfoWindow object is wrapped inside. You probably want to register events on it and not the InfoPanel proxy by calling
google.maps.event.addListener(info._target, 'some_event', your_function);
You can also use the convenience methods 'observe' and 'trigger' as well
info.observe('some_event', your_function); and
Oh and the Ext.Panel object can be referenced like this
Put the file pointer.png somewhere where the script can access it and set it's location via the constant
InfoPanel.POINTER = '/location/to/pointer.png';

Oh, and you can go about getting the code by either downloading the zip file or downloading info_panel.txt and pointer.png, and then changing the 'txt' extension to 'js'. The forum apparently doesn't allow you to upload files of arbitrary extensions.

And one more thing, turns out that any call to
info.setContent(content) should have an Element as a parameter. And your Element should also have a defined width and height. You don't have to hard code it in. I do something like

<div id="hidden" style="visibility: hidden;"></div>
var element = content;
info.setContent(element);To make sure that the following calls are valid and return the actual values

element.getHeight(); element.getWidth();
The reason why this isn't done for you is because you should insert it into a "visibility: hidden;" container that guarantees the same styles are used as what you want in the final location, otherwise the dimensions will not correspond.

10 Mar 2010, 12:44 AM
good job, it's exactly what i need.

I try to implement your code but i have some problems and i don't realy understand what you are doing: the variable content should be html element?
i my case the element.getWidth() is not a function....

i have all requirement Ext 3.0 google map api V3 and prototype...

Can you help me please.
thanks in advance.

Sorry for my poor english

10 Mar 2010, 2:21 AM
If you just want the InfoWindow in google you can look at this post. I am sure you can adapt for google maps v3.



10 Mar 2010, 2:40 AM
Marty, thanks for your reply
i know how implement the infowindowhtml but i need to overload this with an Ext.panel. i want to have an Ext.Panel as Google Maps InfoWindow

10 Mar 2010, 8:21 AM
Have you managed to use this extension?
you have an example?

thank you in advance

10 Mar 2010, 11:20 AM
I have not tried it. Looks cool though.


10 Mar 2010, 11:59 AM
Hmm I'm confused why the forum took so long to notify me that there was a reply to my first post. Anyways, I wrote that code a while ago and Google Maps API v3 is kind of a moving target. A lot has changed since I hacked that Javascript together, so I'm not sure it's going to work at all. I don't really have time to figure out how to make it work again, and chances are even if I come up with another hack it'll stop working after a little while. If anyone wants to try doing this with Google Maps it's best to do it using the v2 API rather than the v3.