Gmaps not defined in production on Heroku cedars

I am new to RoR, so there are many concepts that I don’t understand yet.

As my first project on rails, I coded the site base in a textbook by Michael Hartle. My site is made in rails 3.1.0 and it works fine in dev on my ubuntu station. Inside this site, I have gmaps4rails, which loads into gemfile like this:

gem 'gmaps4rails', "~> 1.4.8" 

I have another control called timeglider, which is a javacript control that is located in my public folder in the / public / timeglider folder.

All this works in dev, but when I want to deploy this in production on heroku, I have a problem in my Chrome console:

http://geojiffy.herokuapp.com/:277Uncaught ReferenceError: Gmaps is not defined
http://geojiffy.herokuapp.com/:182Uncaught ReferenceError: Gmaps is not defined

I invite you to see the result of the loaded page here . There is nothing loaded in the gmaps section.

The problem is that gmaps is not detected when it reaches line # 277.

When I tried to fix this, I read many other questions in stackoverflow about sprocket and how to compile js file.

I changed application application.js from *= require_tree .to

//= require jquery-ui
//= require jquery
//= require jquery_ujs
//= require jiffies.js
//= require gmap3.min.js
//= require jquery-1.7.1.min.js
//= require jquery-ui-1.8.16.custom.min.js
//= require gmaps4rails/all_apis.js
//= require gmaps4rails/bing.js
//= require gmaps4rails/gmaps4rails.base.js.coffee
//= require gmaps4rails/gmaps4rails.bing.js.coffee
//= require gmaps4rails/gmaps4rails.googlemaps.js.coffee
//= require gmaps4rails/gmaps4rails.base.js
//= require gmaps4rails/googlemaps.js

Scripts are compiled by heroku when creating a bullet

You can access the full application.js here. You can find where the Gmaps object is defined in this script.

Clearly, there are many things that I don’t understand in rails, gmaps4rails and heroku that lead to the deployment problem. I'm not sure if the problem is with the asset pipeline.

, , . , ?

p.s: , ,

:

 <%= gmaps({ "map_options" => { "type" => "ROADMAP",  "zoom" => 10, "detect_location" => true,"center_on_user" => true,"auto_adjust" => false}, 
                "markers" => { "data" => @json } }) %> 
<div class='timeline-div' id='placement'></div>

$(function () { 
    var isGeoChanging = false;
    var lastGmapInfoWindowOpen = null; 
    var lastTgInfoWindowOpen = null;

    //*****************************************************
   // Code pour les évènements sur control du formulaire
   //*****************************************************
   $("#btn_change_geo").live('click', function() {
        switchGeoChanging();
    });


    switchGeoChanging = function()
    {
        if (isGeoChanging)
        { 
            $("#btn_change_geo").html("Change Jiffy Geo");
            isGeoChanging = false;
            $("#div_change_geo_info").hide();
        }
        else
        {
            $("#btn_change_geo").html("Cancel");
            isGeoChanging = true;
            $("#div_change_geo_info").show();
        }

    }

    //************************************************
    // Code pour les évènements sur le gmap
    //************************************************
    Gmaps.map.callback = function() 
    { 
        for (var i=0; i<this.markers.length; i++)
        {                   
                var marker = Gmaps.map.markers[i].serviceObject;
                marker.set("id", Gmaps.map.markers[i].id);
                google.maps.event.addListener(marker, 'click', function()
                {   
                    //ici on cache les infowindow precedament ouvert pour garder la fenêtre à l'ordre
                    if (lastGmapInfoWindowOpen != null) { lastGmapInfoWindowOpen.infowindow.close();  }
                    lastGmapInfoWindowOpen = marker;
                    if (lastTgInfoWindowOpen != null) { lastTgInfoWindowOpen.hide();  }

                    //ici,si l'option est enclanché, on change la valeur du du geoId qui est associé au Jiffy
                    if (isGeoChanging)
                    {
                        switchGeoChanging();
                        $("#txt_geo_id").val(this.get("id"));
                        callAjaxGet("http://localhost:3000/jiffies/"+this.get('id')+"/getGeo");
                    }

                } );        
        }
        marker = null;
    };

    callAjaxGet = function(url)
    {
        $.ajax(url, {
                        type: 'GET',
                        data: {  },
                        success: function() { },
                        error: function() { alert("Impossible de charger le Jiffy."); }
                    }); 
    }


    //************************************************
    //  code pour les évènements sur le timeglider
    //************************************************
    $(".timeline-table").css({"display":"block"});


    var tg1 = $("#placement").timeline({
            "min_zoom":5, 
            "max_zoom":50, 
            "show_centerline":true,
            "data_source":"#jiffies_table",
            "show_footer":false,
            "display_zoom_level":true,
            "event_overflow":"scroll",
            "icon_folder":"http://localhost:3000/timeglider/js/timeglider/icons/"
    });





    $("#scrolldown").bind("click", function() {
        $(".timeglider-timeline-event").animate({top:"+=100"})
    });

    $("#scrollup").bind("click", function() {
        $(".timeglider-timeline-event").animate({top:"-=100"})
    });

    <%= @js_jiffies.html_safe%>



}); // end document-ready

+3
3

- http://geojiffy.herokuapp.com/, javascript, URL-, . http://localhost:3000 Dev, Heroku.

<script src="http://localhost:3000/timeglider/js/timeglider/TG_Date.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://localhost:3000/timeglider/js/timeglider/TG_Org.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://localhost:3000/timeglider/js/timeglider/TG_Timeline.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://localhost:3000/timeglider/js/timeglider/TG_TimelineView.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://localhost:3000/timeglider/js/timeglider/TG_Mediator.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://localhost:3000/timeglider/js/timeglider/timeglider.timeline.widget.js" type="text/javascript" charset="utf-8"></script> 

. Chrome

http://localhost:3000/timeglider/css/aristo/jquery-ui-1.8.5.custom.cssFailed http://localhost:3000/timeglider/js/timeglider/Timeglider.cssFailed, -a4d3485a82d7a76995c8b93a7477f17a.js: 315Uncaught ReferenceError: jQuery http://localhost:3000/timeglider/js/jquery.jsFailed http://localhost:3000/timeglider/js/jquery-ui.jsFailed http://localhost:3000/timeglider/js/underscore-min.jsFailed http://localhost:3000/timeglider/js/backbone-min.jsFailed http://localhost:3000/timeglider/js/jquery.tmpl.jsFailed http://localhost:3000/timeglider/js/ba-debug.min.jsFailed http://localhost:3000/timeglider/js/ba-tinyPubSub.jsFailed http://localhost:3000/timeglider/js/jquery.mousewheel.min.jsFailed, http://localhost:3000/timeglider/js/jquery.ui.ipad.jsFailed http://localhost:3000/timeglider/js/raphael-min.jsFailed http://localhost:3000/timeglider/js/jquery.global.jsFailed http://localhost:3000/timeglider/js/timeglider/TG_Date.jsFailed, http://localhost:3000/timeglider/js/timeglider/TG_Org.jsFailed http://localhost:3000/timeglider/js/timeglider/TG_Timeline.jsFailed, http://localhost:3000/timeglider/js/timeglider/TG_TimelineView.jsFailed http://localhost:3000/timeglider/js/timeglider/TG_Mediator.jsFailed, http://localhost:3000/timeglider/js/timeglider/timeglider.timeline.widget.jsFailed http://geojiffy.herokuapp.com/assets/defaults.jsFailed : 404 ( ) http://geojiffy.herokuapp.com/:149Uncaught ReferenceError: $is not http://geojiffy.herokuapp.com/:277Uncaught ReferenceError: Gmaps

+1

, , . jQuery. script , . , Asset Pipeline.
jquery application.js :

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery-1.7.1.min.js 
//= require jquery-ui-1.8.16.custom.min.js
//= require jiffies.js
//= require gmaps4rails/all_apis.js
//= require gmaps4rails/bing.js
//= require gmaps4rails/gmaps4rails.base.js.coffee
//= require gmaps4rails/gmaps4rails.bing.js.coffee
//= require gmaps4rails/gmaps4rails.googlemaps.js.coffee
//= require gmaps4rails/gmaps4rails.base.js
//= require gmaps4rails/googlemaps.js
//= require gmap3.min.js//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery-1.7.1.min.js 
//= require jquery-ui-1.8.16.custom.min.js
//= require jiffies.js
//= require gmaps4rails/all_apis.js
//= require gmaps4rails/bing.js
//= require gmaps4rails/gmaps4rails.base.js.coffee
//= require gmaps4rails/gmaps4rails.bing.js.coffee
//= require gmaps4rails/gmaps4rails.googlemaps.js.coffee
//= require gmaps4rails/gmaps4rails.base.js
//= require gmaps4rails/googlemaps.js
//= require gmap3.min.js

, jquery jquery-ui apis dir gmaps4rails/, , gmaps.min.js

//= require_tree . . script://= PATH_TO_THE_SCRIPT.

+1

: application.js , " ReferenceError: jQuery ".

That is why Gmapsit is not determined subsequently. Fix js dependencies.

0
source

All Articles