Rails 4 - Gmaps4Rails - getting started

Question

I have been trying for months to figure out how to setup gmaps for rails with my Rails 4 app.

I have tried this you tube example and asked this question and this question. I have tried to follow the approach in each of them. At the moment, the repeating errors I'm getting in the console are:

infobox.self-30cc9c9….js?body=1:127 Uncaught ReferenceError: google is not defined --

That error message points to a line in my infobox file which says:

/* InfoBox extends OverlayView in the Google Maps API v3.
 */
InfoBox.prototype = new google.maps.OverlayView();

The next console error says:

1:672 Uncaught ReferenceError: handler is not defined

That error message points to the script tag in my view file that says:

<script>
    markers = handler.addMarkers();
</script>

The next error says:

base.self-8dd1d1a….js?body=1:8 Uncaught ReferenceError: _ is not defined

That error points to this line:

  model = _.isFunction(options.handler) ? options.handler : Gmaps.Objects.Handler;

That line is found in this function:

(function() {
  this.Gmaps = {
    build: function(type, options) {
      var model;
      if (options == null) {
        options = {};
      }
      model = _.isFunction(options.handler) ? options.handler : Gmaps.Objects.Handler;
      return new model(type, options);
    },
    Builders: {},
    Objects: {},
    Google: {
      Objects: {},
      Builders: {}
    }
  };

}).call(this);

The code I have currently is like this:

Gemfile

gem 'geocoder'
gem 'gmaps4rails'#, '~> 2.1', '>= 2.1.2'
gem 'underscore-rails'

application.js

/= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox

I have copied the infobox and markercluster files into my vendor/javascripts file as per this advice.

The infobox.js file I have, starts with:

/**
    2:  * @name InfoBox
    3   * @version 1.1.13 [March 19, 2014]
    4   * @author Gary Little (inspired by proof-of-concept code from Pamela Fox of Google)
    5   * @copyright Copyright 2010 Gary Little [gary at luxcentral.com]
    6:  * @fileoverview InfoBox extends the Google Maps JavaScript API V3 <tt>OverlayView</tt> class.
    7   *  <p>
    8:  *  An InfoBox behaves like a <tt>google.maps.InfoWindow</tt>, but it supports several
    9:  *  additional properties for advanced styling. An InfoBox can also be used as a map label.
   10   *  <p>
   11:  *  An InfoBox also fires the same events as a <tt>google.maps.InfoWindow</tt>.
   12   */
   13  

The marker cluster.js file I have starts with:

// ==ClosureCompiler==
// @compilation_level ADVANCED_OPTIMIZATIONS
// @externs_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/maps/google_maps_api_v3_3.js
// ==/ClosureCompiler==

/**
 * @name MarkerClusterer for Google Maps v3
 * @version version 1.0
 * @author Luke Mahe
 * @fileoverview
 * The library creates and manages per-zoom-level clusters for large amounts of
 * markers.
 * <br/>
 * This is a v3 implementation of the
 * <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/"
 * >v2 MarkerClusterer</a>.
 */

addresses model

class Address < ActiveRecord::Base


  geocoded_by :full_address   # can also be an IP address

  belongs_to :addressable, :polymorphic => true
  def full_address
     [self.first_line, middle_line, last_line, country_name].compact.join("    
    <br>").html_safe
  end

addresses view partial

<script src="//maps.google.com/maps/api/js?v=3.23&key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>"></script>

 <!-- <script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script>
 -->
<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script>
    markers = handler.addMarkers();
</script>

<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});
</script>

render addresses view partial in profile view show:

 <div id="map">
     <%= render partial: "addresses/new_test_map_fix" %>
 </div>

profiles controller:

def show
    # debugger

    @addresses = @profile.addresses

      @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
        marker.lat address.latitude
        marker.lng address.longitude
        marker.infowindow address.full_address
      end

addresses controller:

def show
    @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
      marker.lat address.latitude
      marker.lng address.longitude
    end
  end

Can anyone see where I am going wrong? The you tube clip shows a setup that takes 11 minutes. I've been struggling at this every day - for more than 11 weeks. Help would be gratefully appreciated.

I have also tried removing all the infobox and marker cluster files, installing the rails g gmaps4rails:copy_js as shown in the gem documentation. However this doesnt get it working either.

When I render the show page, I can see from the chrome inspector that an address is recognised (but the map doesnt render):

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([{"lat":-33.858296,"lng":151.1935757,"infowindow":" 1  John Street\u003cbr\u003eWoollahra   NSW   2021\u003cbr\u003eAustralia"}]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});