First of all - Happy New Year!

What I am trying to achieve is may be inefficient, because some solutions exist to display Google Maps in Lightbox type modals. But for my needs I try to do it with jQuery UI dialog. Thus keeping possibility to display map in modal or just dialog box, make such box draggable and/or resizable. As far as I've come, everything works. The Map is displayed via PHP code in content-tpe.tpl.php file, getting data from node variables provided by fields and gmap.module function.

After js check created div is hidden, and afterwards dialog activated by clicking a special link. The map is regular div - not iframe.

THE PROBLEM>
When the map is displayed in dialog box (jQuery UI), it is not sized and centered according to settings nor Gmap module's default settings. It is somehow loaded partially - map background fulls all dialog window (due to 100% width settings), but map pictures and pointers are shown only in left top area of dialog.

When resizing dialog box, js changes container width and height parameters, but the map stays the same, but still can be zoomed, moved, etc, only map area shown is changing, but never full dialog box. When resizing browser window, the missing parts of the map are finally loaded too.

Possible reason.
As far as I could get through the info, it is connected with Google API function .checkResize(); which should be used to let map recalculate new area parameters and load missing information in background. Although could not managed to get it working.

May be somebody can point me to correct direction or possibly easier solution to get this working, or how to access Google API functions, as Gmap module binds Google API and Gmap module together.

Technical info:
D 6.15;
jQ UI 1.6
The map code is whole div componentes produced by gmap_simple_map() function from Gmap module in node-type.tpl.php file.
Modal activation is run from custom js file in custom theme.

Comments

javier.arias’s picture

javier.arias commented

any advance on this one?
I have the same issue. but it happens not only when the map is placed inside the dialog. it happens also when the map is anywhere on the HTML

thanks

j2b’s picture

j2b commented

What I did to let it work properly, is changed modal dialog box system to Fancy Box modal (http://fancybox.net/) clicking on link with appropriate class. But main issue to solve this was to include map in iframe. Some time ago new module was developed - Modal Frame API (http://drupal.org/project/modalframe), which probably could solve this problem, but as I was happy with Fancybox, I didn't check this functionality.

As my solution involves other code and modules, I didn't marked this issue as solved, as it was not straight connected with Modal Dialogbox from jQ_UI.

Additional helpful modules to achieve and play arround could be:

Synapse’s picture

Synapse commented

I have clashed with this just today, and discovered that the map api doesn't handle well resizing of container elements. Calling "google.maps.event.trigger(map, 'resize');" when the element is opened or resized solves the problem.