By altrugon on

I have a GMap with several nodes that come from a view and when the user click the node title inside the marker's bubble it get redirected to the actual node. However if the user goes back to the map these values are reset to the initial values and I need to present the map as s/he left it.

Right now I'm saving the latitude, longitude, and zoom in a cookie and successfully recovering these values when the map page is presented again map for some reason the map is not getting centered.

Can somebody tell me what I'm doing wrong?

Here is my code:

Drupal.behaviors.gmapsavepos = function(context) {
  Drupal.gmap.addHandler('gmap', function(elem) {
    var obj = this;
    /*
    setTimeout(
      function() {
        var m = obj;
        var pos = $.cookie('gmapsavedpos');
        if (pos != null) {
          //var m = Drupal.gmap.getMap(elem.id);
          //m.map.setCenter(pos);
          var posJSON = JSON.parse(pos);
          console.log('saved pos');
          console.log(JSON.stringify(posJSON));
          m.vars.latitude = posJSON.latitude;
          m.vars.longitude = posJSON.latitude;
          m.vars.zoom = posJSON.zoom;
          //m.change('move',-1);
          m.map.setCenter(new GLatLng(posJSON.latitude, posJSON.latitude), posJSON.zoom);
        }
      },
      200
    );
    */
    obj.bind('ready', function() {
      var pos = $.cookie('gmapsavedpos');
      if (pos != null) {
        var map = obj.map;
        var posJSON = JSON.parse(pos);
        console.log('read >> ' + JSON.stringify(posJSON));
        console.log(map);
        /*map.vars.latitude = posJSON.latitude;
        map.vars.longitude = posJSON.latitude;
        map.vars.zoom = posJSON.zoom;*/
        map.setCenter(new GLatLng(posJSON.latitude, posJSON.longitude), posJSON.zoom);
        //m.change('move',-1);
        //obj.map.setCenter(new GLatLng(posJSON.latitude, posJSON.latitude), posJSON.zoom);
      }
    });
    
    obj.bind('move', function() {
      var centerJSON = {
        'latitude': obj.vars.latitude,
        'longitude': obj.vars.longitude,
        'zoom': obj.vars.zoom
      };
      
      console.log('write >>' + JSON.stringify(centerJSON));
      
      $.cookie('chfbc_gmapsavedpos', JSON.stringify(centerJSON), {expire: 1});
    });
  });
};

As you can see I have tried several approaches :(

⋅ Categories: Drupal 6.x

Comments

altrugon’s picture

altrugon commented

After a long try everything procedure I finally got a working solution, here it is for those of you who run into my same problem:

Drupal.behaviors.gmapsavepos = function(context) {
  Drupal.gmap.addHandler('gmap', function(elem) {
    var obj = this;
    
    obj.bind("init", function () {
      var map = obj.map;
      
      window.setTimeout(function() {
        var pos = $.cookie('gmapsavedpos');
        
        if (pos != null) {
          var posJSON = JSON.parse(pos);
          
          map.setCenter(new GLatLng(posJSON.latitude, posJSON.longitude), posJSON.zoom);
        }
        
        $('body').addClass('gmapsavedpos');
      }, 1000);
      
    });
    
    obj.bind('move', function() {
      if ($('body').hasClass('gmapsavedpos')) {
        var map = obj.map;
        var mapCenter = map.getCenter();
        var centerJSON = {
          'latitude': mapCenter.y,
          'longitude': mapCenter.x,
          'zoom': obj.vars.zoom
        };
        
        $.cookie('gmapsavedpos', JSON.stringify(centerJSON), {expire: 1});
      }
    });
  });
};

-------------------------------------------------
take a look -> www.altrugon.com

greggles’s picture

greggles
he/him
Primary language English
Location Denver, Colorado, USA
commented

congrats, and thanks for posting the solution!

--
Morris Animal Foundation

tacoparty’s picture

tacoparty commented

I'd like to use this code but I'm not sure where to paste it. Could someone please point me in the right direction?

Thanks!

tacoparty’s picture

tacoparty commented

Can someone please give me some help with this? I just need to know where to put this code.

Thank you

tacoparty’s picture

tacoparty commented

I am really hoping someone can just tell me where to paste this code. I'm sure it's a simple answer but I can't seem to find anything on the web that tells me where this would go.

Thank you.

tacoparty’s picture

tacoparty commented

OK, I finally able to get some advice elsewhere and was told to place the code in the scripts.js file of my template's directory.

I pasted the code in but it didn't seem to work.

Would really like to use it at some point but for now I give up.

gary.betz’s picture

gary.betz commented

Just curious tacoparty, were you ever able to figure out where to paste this code?

joomtech’s picture

joomtech commented

Could someone give us a little instruction how to paste the above code? I am struggling on how to paste those code lines for a week without any successes.

Thank you very much!

tacoparty’s picture

tacoparty commented

No, I never was able to get it to work but would still love to get it working.

skulegirl’s picture

skulegirl commented

I managed to get this solution working on my D6 site, although it had a small bug that needed fixing. I added the following code to a file in my theme directory, under mytheme/js/gmap_remember_zoom.js:

/******
 * create cookie to remember our center and zoom level when we 
 * navigate back to the map page
 * */

Drupal.behaviors.gmapsavepos = function(context) {
  console.log("in gmapsavepos behavior");

  Drupal.gmap.addHandler('gmap', function(elem) {
    var obj = this;
    console.log("in gmap handler function");

    obj.bind("init", function () {
      var map = obj.map;
      console.log("in gmap init");
      window.setTimeout(function() {

        var cookiename = 'gmapsavedpos_' + location.pathname;
        var pos = $.cookie(cookiename);

        if (pos != null) {
          var posJSON = JSON.parse(pos);
          map.setCenter(new GLatLng(posJSON.latitude, posJSON.longitude), posJSON.zoom);
        }

        $('body').addClass('gmapsavedpos');
      }, 1000);

    });

    obj.bind('move', function() {
      if ($('body').hasClass('gmapsavedpos')) {
        var map = obj.map;
        var mapCenter = map.getCenter();
        var centerJSON = {
          'latitude': mapCenter.y,
          'longitude': mapCenter.x,
          'zoom': obj.vars.zoom
        };

        var cookiename = 'gmapsavedpos_' + location.pathname;
        $.cookie(cookiename, JSON.stringify(centerJSON), {expire: 1});
      }
    });
  });
};

Note that the change between this and the solution posted above is that the cookie name contains the path in it. I had to do this because my site has multiple pages with different maps on it, and if they all share one cookie then they will all be zoomed into the same location, which is clearly not what I want.

The above code uses the jquery cookie plugin, which is not included in D6 (but is in the drupal 7 core AFAIK), so on D6 I needed to download this from https://github.com/carhartl/jquery-cookie/, and copy it to libraries/jquery.cookie/jquery.cookie.js. You should make sure to have the libraries module installed as well so you can load the script from here easily.

I then added the following lines to my template.php file in my theme directory:

/*
 * Add gmap remember zoom level javascript
 */

drupal_add_js(libraries_get_path('jquery.cookie') . '/jquery.cookie.js', 'core'); // need libraries module for this to work
drupal_add_js(drupal_get_path('theme', 'mytheme') . '/js/gmap_remember_zoom.js', 'core');

Note that there's a bit of a kludge here -- in D6, javascript files added from themes would typically have the second "type" parameter of the drupal_add_js call set to "theme" so that they are loaded after the modules' javascript files. However this code doesn't work if it's added after the gmap.js script provided by the gmap module. (The init hooks for the map have already been called by then it seems.) So I set the type to 'core' instead to ensure that it's always added before the gmap module's scripts. (Leaving that parameter out completely, i.e. letting it default to 'module', also worked for me, however I'm not sure if it's just dumb luck or based on my theme or script name that it loaded before the gmap module's scripts, so I'm explicitly using 'core' to be safe.)

That should be it. Perhaps not the best or most elegant solution, but it seems to work well for me.