Results 1 to 7 of 7

Thread: Ext.Panel as Google Maps InfoWindow

  1. #1

    Default Ext.Panel as Google Maps InfoWindow

    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 1.6.1.0. Version 1.6.0.3 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.

    1. To initialize it call something like
      Code:
      var info = new InfoPanel({ whatever_options_you_want });
    2. To set the title call
      Code:
      info.setTitle(your_title_here);
    3. The actually InfoWindow object is wrapped inside. You probably want to register events on it and not the InfoPanel proxy by calling
      Code:
      google.maps.event.addListener(info._target, 'some_event', your_function);
    4. You can also use the convenience methods 'observe' and 'trigger' as well
      Code:
      info.observe('some_event', your_function);
      and
      Code:
      info.trigger('some_event');
    5. Oh and the Ext.Panel object can be referenced like this
      Code:
      info.panel.doSomeExtThings();
    6. Put the file pointer.png somewhere where the script can access it and set it's location via the constant
      Code:
      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
    Code:
    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
    Code:
    <div id="hidden" style="visibility: hidden;"></div>
    Code:
    var element = content;
    $('hidden').update(element);
    info.setContent(element);
    To make sure that the following calls are valid and return the actual values
    Code:
    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.
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2

    Default

    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

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Posts
    566

    Default

    If you just want the InfoWindow in google you can look at this post. I am sure you can adapt for google maps v3.

    http://www.extjs.com/forum/showthrea...654#post429654

    Marty

  4. #4

    Default

    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

  5. #5

    Default

    Have you managed to use this extension?
    you have an example?

    thank you in advance

  6. #6
    Sencha User
    Join Date
    Mar 2008
    Posts
    566

    Default

    I have not tried it. Looks cool though.

    Marty

  7. #7

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •