ajax per innerHTML: map only shown if no ajax. Need to re-init. how?

Yeah, it's a bit of a problem. I never envisioned rebooting the maps when I originally wrote the code, so there are a lot of gotchas.

Here is an *experimental* method that may allow you to successfully reboot a map.

var mapid = 'testmap';
Drupal.gmap.unloadMap(mapid); // This makes gmap forget the map state.
$('#gmap-' + mapid + '-gmap0').removeClass('gmap-processed').empty(); // This should reset the DOM hopefully.
Drupal.attachBehaviors(document); // Reruns the behaviors, causing gmap to pick up the "unprocessed" map div and attempt to boot it.

It won't detatch any external controls, which will stop working when the map is rebooted. I don't know how to solve this issue in D5, which is why the whole idea is experimental. (The solution in D6 involves namespaced event handlers, but I haven't committed the changes required for this because it would make the code diverge significantly.)

Maybe in the future release ?

Hi!

I am having the same problem. I just wonder though, where I should put the code presented by bdragon?
Which hook? Or someplace else?

Regards Pantze

subscribing...

I have the same problems.

The map shows fine, but when one selects something form the exposed filters and clicks 'apply' I get "Javascript is required to view this map".
This only happens when I use AJAX which I desperately need!

Can anyone (Melchior) tell me where to put the code given in the examples to re-init the map?

Cheers

I've posted a possible solution (it works for me) on thread: http://drupal.org/node/315236 which has a longer more detailed discussion of this problem.

Cheers.

I have something like that to perform a ajax load from a view with node teaser to the complete. The map is not present on the node teaser and when they are load from the complete node with ajax i have the "Javascript is required to view this map." and after i use the code from #1 i have nothing displayed.

//Node load
            $('#content div.view-content div.views-row').each(function (i) {
                $(this).click(function(event){
                    event.preventDefault();
                    var node_path = $('div.views-field-title a',this).attr('href');
                    $(this).load(node_path + ' #content>div.node', function() {
                        var mapid = 'auto1map';
                        Drupal.gmap.unloadMap(mapid); // This makes gmap forget the map state.
                        $('#gmap-' + mapid + '-gmap0').removeClass('gmap-processed').empty(); // This should reset the DOM hopefully.
                        Drupal.attachBehaviors(document); // Reruns the behaviors, causing gmap to pick up the "unprocessed" map div and attempt to boot it.
                    });
                });
            });

and the field after loading

<div class="field field-type-geo field-field-property-geocode">
<div class="field-items">
<div class="field-item odd">
<div id="gmap-auto1map-gmap0" class="gmap-control gmap-gmap gmap gmap-map gmap-auto1map-gmap" style="width: 300px; height: 200px;"/>
</div>
</div>
</div>

ha... and in my module i have this code to run gmap on a page without gmap..

function mymodule_js_load_gmap() {
  if (function_exists('_gmap_doheader')) {
    _gmap_doheader();
    $path = drupal_get_path('module', 'gmap').'/js/';
    drupal_add_js($path .'locpick.js', 'module', 'header', false, true, false);
    unset($path);
  }
}

Ok... after some houres a not so bad solution.

First JS is not executed with load if the result containt a body or head. So first in my theme
File: ajax-page.tpl.php

<div id="ajax_content"><!--OPEN CONTENT-->
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php print $content; ?>
</div><!--CLOSE CONTENT-->

File: template.tpl.php

function gratis_immo_preprocess_page(&$vars, $hook) {
  if ( isset($_GET['ajax']) && $_GET['ajax'] == 1 ) {
        $vars['template_file'] = 'ajax-page';
  }
}

After in a module i load a costum JS with this

//Ajax Node load with gmap
            $('#content div.view-content div.views-row').each(function (i) {
                $(this).click(function(event){
                    event.preventDefault();
                    var node_path = $('div.views-field-title a',this).attr('href');
                    node_path = node_path + '?ajax=1';
                    $(this).load(node_path, function() {
                        //FIXM unload map if an other is loaded
                        //Drupal.gmap.setup();
                        //var mapid = 'auto1map';
                        //Drupal.gmap.unloadMap(mapid); // This makes gmap forget the map state.
                        //$('#gmap-' + mapid + '-gmap0').removeClass('gmap-processed').empty(); // This should reset the DOM hopefully.
                        //Drupal.attachBehaviors(document); // Reruns the behaviors, causing gmap to pick up the "unprocessed" map div and attempt to boot it.
                        //don't load all behaviors but only gmap
                       $('.gmap-control:not(.gmap-processed)').addClass('gmap-processed').each(Drupal.gmap.setup);
                    });
                });
            });

An important thing is to load all JS files needed by geo in the php file of your module

function ajax_load_gmap_js_load_gmap() {
    if (function_exists('_gmap_doheader')) {
        _gmap_doheader();
        $path = drupal_get_path('module', 'gmap').'/js/';
        drupal_add_js($path .'locpick.js', 'module', 'header', false, true, false);
        drupal_add_js($path .'markerloader_static.js','module', 'header', false, true, false);
        drupal_add_js($path .'icon.js','module', 'header', false, true, false);
        //FIXME not static path
        drupal_add_js('/sites/default/files/js/gmap_markers.js', 'module', 'header', FALSE, TRUE, FALSE);
        unset($path);
    }
}

All this code need cleanup but I hop it help.

Subscribing to come back to tomorrow - I will look into whether I can figure out how to get the unloadMap and attachBehaviors code to work in the context of a Quicktabs block that loads via AJAX.

Subscribing. I was trying to set up a view that used http://drupal.org/project/viewsdisplaytabs which requires ajax to be used. Hopefully this is the right spot to mention the issue since I only get the JS msg when i enable ajax on my view.

i m having same issue.. i m trying load the map using javascript..

  var hr = new XMLHttpRequest();
   
   var url = "http://localhost/office/sites/all/modules/gmap_search/searchcity.php";
   
    var city = document.getElementById("city").value;
    var vars = "city="+city;
    hr.open("POST", url, false);

    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   
    hr.onreadystatechange = function() {
  
    
	    if(hr.readyState == 4 && hr.status == 200) {
		    var return_data = hr.responseText;
           

	
		document.getElementById("custom_gmap_on_home").innerHTML = return_data; 
        Drupal.gmap.unloadMap("offers_map");// map displayed here!
     
	    }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
    //document.getElementById("status").innerHTML = "processing...";
 
 }

but it says javascript is required to run the map.. my php file is returning correct data.. if i put the unload function where should i put that?

my problem resolved!

Rather than creating a map obj in a php.. what i did was i just retrieve the necessary data array using a php file and then called the following function which i created! problem solved!

function create_markers(lat,lng,html){
var map = Drupal.gmap.getMap('MAP_ID').map;
map.clearOverlays();//deletes currant markers

      var point = new GLatLng(lat,lng);

      var marker = new GMarker(point,"orange")
   
      map.addOverlay(marker);

      GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
       
}

this worked for me...!