title: jQuery and .data()
body: <p>I'm writing a jQuery plugin and I need to keep objects through my plugin method calls. So I tried to use <code>.data()</code> as recommended here : <a href="http://docs.jquery.com/Plugins/Authoring" rel="nofollow noreferrer">http://docs.jquery.com/Plugins/Authoring</a></p>
  
  <p>but I'm unable to retrieve my stored objects, here my code :</p>
  
  <pre><code>(function($) {
      var methods = {
          init : function(options) {
              return this.each(function() {
                  var $this = $(this);
                  var geocoder = new google.maps.Geocoder();
                  var settings = {
                      'geocodeSearch': {address: 'France'}
                  };
  
                  // Merge default settings with user ones
                  if (options) {
                      $.extend(settings, options);
                  }
  
                  function drawMap(geocodeResult) {
                      var mapSettings = {
                          center: geocodeResult[0].geometry.location,
                          mapTypeControl: true,
                          mapTypeId: google.maps.MapTypeId.SATELLITE,
                          overviewMapControl: false,
                          panControl: true,
                          scaleControl: true,
                          streetViewControl: false,
                          zoom: 6,
                          zoomControl: true,
                          zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }
                      };
  
                      var element = document.getElementById($this.attr("id"));
                      var map = new google.maps.Map(element, mapSettings);
                      var cluster = new MarkerClusterer(map);
  
                      cluster.setGridSize(100);
  
                      $this.data('eventsmap', {
                          cluster: cluster,
                          map: map
                      });
                  }
  
                      geocoder.geocode(settings.geocodeSearch, drawMap);
              });
          },
          restrictZoom : function(minimalZoom, maximalZoom) {
              return this.each(function() {
                  var $this = $(this);
                  console.log($this.data());
                  console.log($this.data('eventsmap'));
  
                  //google.maps.event.addListener(map, 'zoom_changed', function() {
                  //  if (map.getZoom() &gt; maximalZoom) {
                  //      map.setZoom(maximalZoom);
                  //  }
                  //  if (map.getZoom() &lt; minimalZoom) {
                  //      map.setZoom(minimalZoom);
                  //  }
                  //});
                  //cluster.setMaxZoom(maximalZoom-1);
              });
          }
      };
  
      $.fn.eventsMap = function(method) {
          if (methods[method]) {
              return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
          } else if (typeof method === 'object' || !method) {
              return methods.init.apply(this, arguments);
          } else {
              $.error( 'Method ' +  method + ' does not exist on jQuery.eventsMap' );
          }
      };
  })(jQuery);
  </code></pre>
  
  <p>When I call restrictZoom method, $this.data() (line 48) returns data from the DOM but if I try to get the 'eventsmap' attribute as set during the init method, I got undefined ($this.data('eventsmap') line 49).
  I'm sure it's the right DOM object and my objects are because I can see them trhough my browser debugger :</p>
  
  <p><img src="https://i.stack.imgur.com/QuBY1.png" alt="Chrome output"></p>
  
  <p>I dunno what to do.</p>
  
  <p>Edited : html :</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us" &gt; 
  &lt;head&gt; 
  &lt;title&gt;Map tool | Django site admin&lt;/title&gt; 
  &lt;link rel="stylesheet" type="text/css" href="/static/admin/css/base.css" /&gt; 
  
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-darkness/jquery-ui.css" /&gt; 
  
  &lt;!--[if lte IE 7]&gt;&lt;link rel="stylesheet" type="text/css" href="/static/admin/css/ie.css" /&gt;&lt;![endif]--&gt; 
  
  &lt;script type="text/javascript"&gt;window.__admin_media_prefix__ = "/static/admin/";&lt;/script&gt; 
  
  &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="/static/earthquake/js/markerclusterer.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="/static/earthquake/js/map.js"&gt;&lt;/script&gt; 
  
  &lt;meta name="robots" content="NONE,NOARCHIVE" /&gt; 
  &lt;/head&gt; 
  
  
  &lt;body class="eventsmap"&gt; 
  
  &lt;!-- Container --&gt; 
  &lt;div id="container"&gt; 
  
  
      &lt;!-- Header --&gt; 
      &lt;div id="header"&gt; 
          &lt;div id="branding"&gt; 
          &lt;h1 id="site-name"&gt;Events database&lt;/h1&gt; 
          &lt;/div&gt; 
  
          &lt;div id="user-tools"&gt; 
              Welcome,
              &lt;strong&gt;admin&lt;/strong&gt;.
  
  
  
                      &lt;a href="/admin/doc/"&gt;Documentation&lt;/a&gt; /
  
  
  
                      &lt;a href="/admin/password_change/"&gt; 
  
                  Change password&lt;/a&gt; /
  
  
                      &lt;a href="/admin/logout/"&gt; 
  
                  Log out&lt;/a&gt; 
  
          &lt;/div&gt; 
  
  
      &lt;/div&gt; 
      &lt;!-- END Header --&gt; 
  
  &lt;div class="breadcrumbs"&gt; 
  &lt;a href="/admin/"&gt;Home&lt;/a&gt; &amp;rsaquo; &lt;a href="/admin/events"&gt;Events&lt;/a&gt; &amp;rsaquo; Map tool
  &lt;/div&gt; 
  
  
  
  
  
      &lt;!-- Content --&gt; 
      &lt;div id="content" class="colM"&gt; 
  
  
  
  &lt;div id="eventsmap" style="width: 100%;"&gt;&lt;/div&gt; 
  &lt;script&gt; 
  $(document).ready(function() {
      var mapCanvas = $("#eventsmap");
  
      // Cleanup and prepare HTML from Django
      $("#footer").remove();
      $("html").height("100%");
      $("body").height("100%");
      $("body").css("overflow-y", "hidden");
      $("#content").css('margin', 0);
          mapCanvas.height($(document).height()-57);
  
      mapCanvas.eventsMap({
          geocodeSearch: {address: 'France'}
      });
      mapCanvas.eventsMap('restrictZoom', {
          minimalZoom: 2,
          maximalZoom: 9
      });
  });
  &lt;/script&gt; 
  
  
          &lt;br class="clear" /&gt; 
      &lt;/div&gt; 
      &lt;!-- END Content --&gt; 
  
      &lt;div id="footer"&gt;&lt;/div&gt; 
  &lt;/div&gt; 
  &lt;!-- END Container --&gt; 
  
  &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>