Rails 4 - how to reference a javascript source in

Question

I have just discovered that I need to amend my GMaps for Rails setup by inserting javascript files directly in my app. Rails 4 - Gmaps4Rails - map won't render

I have cloned both infobox and markerclusterer repos and am now stuck in trying to reference the relevant files in my app.

I have the folders of files that came with the clone in my vendor file.

I understand the javascript files that I need to use are: infobox.js and markerclusterer.js

These files are located in:

 vendor/js-marker-clusterer/src/makerclusterer.js
vendor/v3-utility-library/src/infobox.js

I want to use them in place of the code in this view:

<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 -->

Do I need to reference the javascript files in app/application.js? If so, at what point in the path do I need to start (given these files are not inside the vendor/assets/javascripts folder)?

Also, I understand I need to incorporate the markerclusterer images somehow. Those have also come through in the cloned repo and are stored in vendor/js-markerclusterer/images folder. How do I reference these so that they work in the view?

Answer 1

The most logical thing to do would be to place folders js-marker-clusterer and v3-utility-library under vendor/assets/javascripts so you can reference the files you need in application.js as

//= js-marker-clusterer/src/makerclusterer
//= v3-utility-library/src/infobox

If, however, you cannot do that for some reason you can add a custom path into config.assets.paths so the autoloader can find them

// application.rb
config.assets.paths << Rails.root.join("vendor", "js-marker-clusterer")
config.assets.paths << Rails.root.join("vendor", "v3-utility-library")

And then reference them just as

//= src/makerclusterer
//= src/infobox

Answer 2

Its always good to use cdn or in your case googlecode servers, as the files will load faster from their servers. So yes, doing this will not do any harm.

<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 -->

Lets say you want to load them via the manifest file(i.e., application.js), you can copy markerclusterer.js and infobox.js inside your app/assets/javascripts folder and include them in application.js like this

//application.js file's content
//= markercluster
//= infobox

Now since these two files need to load after your google maps api file, you should add application.js after calling for maps api. Which ensures Google Maps API has loaded first and google.maps object is available to you.

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

And additionally you can put all the images in folders inside app/assets/images and access them just as you would access any other image from it.