Skip to main content
initializing Gmap in Jquery

Drupal 6 Re-initializing Gmap in Jquery

Assume, I am able to print the gmap using Drupal code in a div. I would like this map to appear inside a fancybox and to be hidden on the website. I've managed to do it (fancybox works ok) however the map is not displayed correctly, I am getting "Javascript is required to view this map".
 
Here is an *experimental* method, that may allow you to successfully reboot a map.
 
  1. // Init Fancybox
  2. $("FACYBOX-TRIGGER").fancybox({
  3.   type: 'html',
  4.   centerOnScroll  : true,
  5.   content: $gmap_html, // copy of hidden gmap dom
  6.   onComplete: function() {
  7.     var $gmap = jQuery('#fancybox-wrap .gmap');
  8.     if ($gmap.length) {
  9.       $gmap.each(function () {
  10.           if ($(this).length) {
  11.              // Get gmap unique id
  12.              var mapid = $(this)[0].id.split('-');
  13.              mapid.pop();
  14.              mapid.shift();
  15.              mapid = mapid.join('-');
  16.              // This makes gmap forget the map state.
  17.              Drupal.gmap.unloadMap(mapid);
  18.              // This should reset the DOM hopefully.
  19.              $(this).removeClass('gmap-processed').empty();
  20.              // Reruns the behaviors, causing gmap to pick up the "unprocessed" map div and attempt to boot it.
  21.              Drupal.attachBehaviors(document);
  22.           }
  23.        });
  24.     }
  25.   },
  26. });

 

Comments

It might be a little more efficient to change the last line from:

Drupal.attachBehaviors(document);

to

Drupal.attachBehaviors(this);

As it will prevent a lot of unnecessary dom traversal within each behavior on the site.