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&amp;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);

});