title: Gmaps is not defined in production on Heroku Cedar
body: <p>I'm new to RoR so there are many concepts that I don't understand well yet. </p>
  
  <p>As my first project on rails I coded a site base on the tutorial by Michael Hartl.
  My site is done in rails 3.1.0 and it works fine in dev on my ubuntu station. 
  Within that site I have gmaps4rails which is loaded in gemfile that way: </p>
  
  <pre><code>gem 'gmaps4rails', "~&gt; 1.4.8" 
  </code></pre>
  
  <p>I have also another control called timeglider which is a javacript control that is in my public folder in /public/timeglider folder.</p>
  
  <p>All this is working in dev but when i want to deploy that in production on heroku i have problem in my chrome console: </p>
  
  <pre><code>http://geojiffy.herokuapp.com/:277Uncaught ReferenceError: Gmaps is not defined
  http://geojiffy.herokuapp.com/:182Uncaught ReferenceError: Gmaps is not defined
  </code></pre>
  
  <p>I invite you to go see the result of the loaded page <a href="http://geojiffy.herokuapp.com/" rel="nofollow">here</a>.
  Nothing is loaded in the gmaps section.</p>
  
  <p>The problem is that Gmaps is not defined when it reach the line #277. </p>
  
  <p>When I tried to fix it I read many other questions in stackoverflow about sprocket and the way it compiles the js file.</p>
  
  <p>I changed my application.js from  <code>*= require_tree .</code> to </p>
  
  <pre><code>//= require jquery-ui
  //= require jquery
  //= require jquery_ujs
  //= require jiffies.js
  //= require gmap3.min.js
  //= require jquery-1.7.1.min.js
  //= require jquery-ui-1.8.16.custom.min.js
  //= require gmaps4rails/all_apis.js
  //= require gmaps4rails/bing.js
  //= require gmaps4rails/gmaps4rails.base.js.coffee
  //= require gmaps4rails/gmaps4rails.bing.js.coffee
  //= require gmaps4rails/gmaps4rails.googlemaps.js.coffee
  //= require gmaps4rails/gmaps4rails.base.js
  //= require gmaps4rails/googlemaps.js
  </code></pre>
  
  <p>The scripts are compile by heroku on the slug creation </p>
  
  <p>You can have access to the complete application.js <a href="http://geojiffy.herokuapp.com/assets/application-a4d3485a82d7a76995c8b93a7477f17a.js" rel="nofollow">here</a>
  You can find where the Gmaps object is defined within that script. </p>
  
  <p>It's clear that there are many things that I don't understand in rails, gmaps4rails and heroku that result in a deployment problem. I am not sure that the problem comes from the asset pipeline.  </p>
  
  <p>I spent many nights on this bug and I'm not able to understand a clear way to debug it. Can you give me some tips to find my bug? </p>
  
  <p>p.s : I'd like to post you photo and links but i'm new so there are constraints </p>
  
  <p>That is the code in my view : </p>
  
  <pre><code> &lt;%= gmaps({ "map_options" =&gt; { "type" =&gt; "ROADMAP",  "zoom" =&gt; 10, "detect_location" =&gt; true,"center_on_user" =&gt; true,"auto_adjust" =&gt; false}, 
                  "markers" =&gt; { "data" =&gt; @json } }) %&gt; 
  &lt;div class='timeline-div' id='placement'&gt;&lt;/div&gt;
  </code></pre>
  
  <p> </p>
  
  <pre><code>$(function () { 
      var isGeoChanging = false;
      var lastGmapInfoWindowOpen = null; 
      var lastTgInfoWindowOpen = null;
  
      //*****************************************************
     // Code pour les évènements sur control du formulaire
     //*****************************************************
     $("#btn_change_geo").live('click', function() {
          switchGeoChanging();
      });
  
  
      switchGeoChanging = function()
      {
          if (isGeoChanging)
          { 
              $("#btn_change_geo").html("Change Jiffy's Geo");
              isGeoChanging = false;
              $("#div_change_geo_info").hide();
          }
          else
          {
              $("#btn_change_geo").html("Cancel");
              isGeoChanging = true;
              $("#div_change_geo_info").show();
          }
  
      }
  
      //************************************************
      // Code pour les évènements sur le gmap
      //************************************************
      Gmaps.map.callback = function() 
      { 
          for (var i=0; i&lt;this.markers.length; i++)
          {                   
                  var marker = Gmaps.map.markers[i].serviceObject;
                  marker.set("id", Gmaps.map.markers[i].id);
                  google.maps.event.addListener(marker, 'click', function()
                  {   
                      //ici on cache les infowindow precedament ouvert pour garder la fenêtre à l'ordre
                      if (lastGmapInfoWindowOpen != null) { lastGmapInfoWindowOpen.infowindow.close();  }
                      lastGmapInfoWindowOpen = marker;
                      if (lastTgInfoWindowOpen != null) { lastTgInfoWindowOpen.hide();  }
  
                      //ici,si l'option est enclanché, on change la valeur du du geoId qui est associé au Jiffy
                      if (isGeoChanging)
                      {
                          switchGeoChanging();
                          $("#txt_geo_id").val(this.get("id"));
                          callAjaxGet("http://localhost:3000/jiffies/"+this.get('id')+"/getGeo");
                      }
  
                  } );        
          }
          marker = null;
      };
  
      callAjaxGet = function(url)
      {
          $.ajax(url, {
                          type: 'GET',
                          data: {  },
                          success: function() { },
                          error: function() { alert("Impossible de charger le Jiffy."); }
                      }); 
      }
  
  
      //************************************************
      //  code pour les évènements sur le timeglider
      //************************************************
      $(".timeline-table").css({"display":"block"});
  
  
      var tg1 = $("#placement").timeline({
              "min_zoom":5, 
              "max_zoom":50, 
              "show_centerline":true,
              "data_source":"#jiffies_table",
              "show_footer":false,
              "display_zoom_level":true,
              "event_overflow":"scroll",
              "icon_folder":"http://localhost:3000/timeglider/js/timeglider/icons/"
      });
  
  
  
  
  
      $("#scrolldown").bind("click", function() {
          $(".timeglider-timeline-event").animate({top:"+=100"})
      });
  
      $("#scrollup").bind("click", function() {
          $(".timeglider-timeline-event").animate({top:"-=100"})
      });
  
      &lt;%= @js_jiffies.html_safe%&gt;
  
  
  
  }); // end document-ready
  </code></pre>
  
  <p></p>