Uncaught ReferenceError: Gmaps is not defined (rails 4)

Question

I installed gmaps4rails 2.1.2 and the map is showing in local but not in production. I can tell it has to do by the way/order js is been called but I can not figure it out.

View

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>

...
    <% if params[:search].present? && @vehicles.present? %>


      <script type="text/javascript">
        var directionsDisplay = new google.maps.DirectionsRenderer();
        var directionsService = new google.maps.DirectionsService();

        function calcRoute() {
          var origin      = new google.maps.LatLng(<%= @vehicles.first[1].to_f/1000000 %>, <%= @vehicles.first[2].to_f/1000000 %>);
          var destination = new google.maps.LatLng(19.434576, -99.1878757);
          var request = {
              origin:      origin,
              destination: destination,
              travelMode:  google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
          });
        }

        calcRoute();

        var handler = Gmaps.build('Google');
        handler.buildMap({ internal: {id: 'directions'}}, function(){
          directionsDisplay.setMap(handler.getMap());
        });
      </script>

    <% end -%>

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets
//= require underscore
//= require gmaps/google

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

application.html.erb

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>

---

UPDATE March 23rd:

1. Added to application view: <%= yield :scripts %>
2. Added data-no-turbolink="true"
3. Added <% content_for :javascript do %>
4. Added $(document).on('page:change', function () {

Still not working.

Not working in Heroku:

Working in local:

application.html.erb

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= yield :scripts %> 
<%= csrf_meta_tags %>

nearestVehicle.html.erb

<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>


<% content_for(:body_attributes) do %>
    data-no-turbolink="true"
  <% end %>

<!--Header -->
  <div class="row">
    <div class="col-md-12">
      <div class="page-header">
        <h3>Vehículo más cercano a una dirección</h3>
      </div>
    </div>
  </div>


  <!--Table -->
  <div class="row">
    <div class="col-md-3">

        <%= simple_form_for '', url: nearestVehicle_path, :method => :get do |f| %>
            <%= f.input :id, collection: @all_addresses, :label_method => :addrname1, :label => 'Direccion', :selected => params[:id], :autofocus => true %>
            <%= f.button :submit, value: "Buscar",:name => nil%>
        <% end %>

        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Vehiculo</th>
              <th>Distancia (Km)</th>
              <th>Tiempo (min)</th>
            </tr>
          </thead>

        <% if params[:id].present? && @vehicles.present? %>
          <tbody>
            <% @vehicles.each do |vehicle| %>
              <tr>
                <td><%= vehicle[0] %></td>
                <td><%= number_with_precision( vehicle[3].to_f/1000, :precision => 1) %></td>
                <td><%= vehicle[4].to_i/60 %></td>
              </tr>
            <% end %>
          </tbody>
        <% end %>
        </table>
    </div>
    <div class="col-md-9">
        <div style='width: 100%;'>
            <div id="directions" style='width: 100%; height: 400px;'></div>
        </div>
    </div>
  </div>

<% if params[:id].present? && @vehicles.present? %>


<% content_for :javascript do %>
    <script type="text/javascript">
      $(document).on('page:change', function () {

            var directionsDisplay = new google.maps.DirectionsRenderer();
            var directionsService = new google.maps.DirectionsService();

            function calcRoute() {
              var origin      = new google.maps.LatLng(<%= @vehicles.first[1].to_f/1000000 %>, <%= @vehicles.first[2].to_f/1000000 %>);
              var destination = new google.maps.LatLng(<%= @address.positiony.to_f/1000000 %>, <%= @address.positionx.to_f/1000000 %>);
              var request = {
                  origin:      origin,
                  destination: destination,
                  travelMode:  google.maps.TravelMode.DRIVING
              };
              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                }
              });
            }

            calcRoute();

            var handler = Gmaps.build('Google');
            handler.buildMap({provider: {disableDefaultUI: true }, internal: {id: 'directions'}}, function(){
              directionsDisplay.setMap(handler.getMap());
            });
        });
    </script>
<% end %>
<% end -%>

Answer 1

A part from the changes described on the UPDATE March 23rd, I moved the //= require_tree to the end of the list. Now it looks like this:

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require bootstrap-sprockets
//= require underscore
//= require gmaps/google
//= require_tree .