In what oreder does the Asset-Pipeline in Ruby on Rails load JavaScript Files?
- by psycatham
Hello,
So, when I decided to remove the tags <script></script> and benefit from the asset-pipeline instead, complications took place.
I am working with Google Maps' API V3, and to benefit from their functions and objects that their code provides, you have load the link first
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
Basically, If I put this line before their code, and put their code in script tags, things work out pretty perfecty, but when I use javascript_include_tag instead of script tag in html and copy my code to the file I pointed at -Like This -
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<%=javascript_include_tag "map_new_marker_drag"%>
, the asset-pipeline seems to load That file before loading the link of Google Maps API, thus I get the error :
- Uncaught ReferenceError : google is undefined
I tried putting the link in javascript_include_tag too -Like this-
<%=javascript_include_tag "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places" %>
<%=javascript_include_tag "map_new_marker_drag"%>
, and it generated this
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/17/2/%7Bmain,places%7D.js" type="text/javascript"></script>
<script src="/assets/map_new_marker_drag.js?body=1"></script>
and the same error Uncaught ReferenceError : google is undefined.
Do I have to put it in another order? what am I missing about the asset-pipeline mechanisms ?
What should I do to make the link load before the code so to benefit from their objects and get rid of the error?
PS : I tried using jquery functions and so , but I seem not to make it happen. If you still think this is a proper solution, please provide me some code I can use
this is the jquery function I used
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
var scriptTwo = document.createElement('script');
scriptTwo.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places";
document.body.appendChild(scripTwo);
});
