Rails 4 - Gmaps4Rails - map won't render

Question

I'm struggling to get my google maps to work in my Rails app.

It was all working fine - I moved on to work on the next feature and have come back to find it no longer works.

I have models for address, profile and project. I use address in each of profile and project In each case, the map does not display.

The associations between models are:

Address

belongs_to :addressable, :polymorphic => true

Profile

has_many :addresses, as: :addressable
    accepts_nested_attributes_for :addresses,  reject_if: :all_blank, allow_destroy: true

Project

has_many :addresses, as: :addressable
    accepts_nested_attributes_for :addresses,  reject_if: :all_blank, allow_destroy: true

The controller show functions are:

Address

def create
    @address = Address.new(address_params)
    authorize @address

    respond_to do |format|
      if @address.save
        format.html { redirect_to @address, notice: 'Address was successfully created.' }
        format.json { render :show, status: :created, location: @address }
      else
        format.html { render :new }
        format.json { render json: @address.errors, status: :unprocessable_entity }
      end
    end
  end

Profile

def show
    # debugger
    @profile = Profile.includes(:industries).find(params[:id])
    # @organisation = Organisation.find(params[:organisation_id])
    # @profiles = @organisation.profiles
    @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
  end

Project

def show
    @invite = Invite.new
    @project = Project.find(params[:id])
    @addresses = @project.addresses

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

      end

In my profiles show, I have:

  <%= render partial: "profiles/main_address" %>

In profiles/main address, I have:

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

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

I have the same process in my projects folder for showing the project address.

In my gem file I have:

gem 'google-api-client', '~> 0.7.1', require: 'google/api_client'
gem 'gmaps4rails', '~> 2.1', '>= 2.1.2'
gem 'underscore-rails'

I can't figure out why I just get a blank space instead of a map showing the address.

In my console inspector, I can see a red error that says:

primitives.self-5b8a3a6….js?body=1:16 Uncaught ReferenceError: MarkerClusterer is not definedGmaps.Google.Primitives @ primitives.self-5b8a3a6….js?body=1:16Gmaps.Objects.Handler.Handler.setPrimitives @ handler.self-2f220ca….js?body=1:122Handler @ handler.self-2f220ca….js?body=1:8Gmaps.build @ base.self-8dd1d1a….js?body=1:9(anonymous function) @ 14:760

Googling the error, Uncaught ReferenceError: MarkerClusterer is not defined, the gem maker suggests running:

rails generate gmaps4rails:install

When I try that, I get an error that says:

Running via Spring preloader in process 93390
Could not find generator 'gmaps4rails:install'. Maybe you meant 'paper_trail:install', 'gmaps4rails:copy_js' or 'responders:install'

My console inspector also shows a number of warnings related to gmaps, as:

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
util.js:220 Google Maps API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version
util.js:220 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
util.js:220 Google Maps API warning: InvalidClientId https://developers.google.com/maps/documentation/javascript/error-messages#invalid-client-id
util.js:220 Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
14:1 Failed to decode downloaded font: http://localhost:3000/assets/flaticon-080b09d3f53cb13c2f9d9a4c53ad7a71206bd8e2390c3e18d2b42ce9388a49a6.woff

I have an api key - I just don't know where to put it in my code.

Can anyone see how to help. I don't mind if I don't solve the warning problems with Gmaps, but I do want to get back to where I was when the map displayed.

Answer 1

So your problem is with these two lines:

<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script>

Somebody referenced markerclusterer and infobox libraries directly from Google SVN (which is a bad practise) and the library was moved to Github couple of weeks ago.

You can download the infobox library from here to your project and reference infobox_packed.js file:

<script src='path/to/infobox_packed.js' type='text/javascript'></script>

Similarly, you can download the marker clusterer library here. Careful: for marker cluster you will need both src and images.

Please read this SO question and answers, also this one and maybe this one. I strongly advice you to read all the answers in the questions, as some of them contain bad solutions (reference libraries from the new github location, instead of downloading them to your project and referencing them from there is bad practise)