javascript - ajax呼び出しでgmaps4railsマップがキャンバスに完全に表示されない

Question

私はモンゴイドとブートストラップでgmaps4railsを使用しています。次のステップ ボタンをクリックして ajax 呼び出しでマップをロードすると、マップがキャンバスに完全に表示されません (添付の写真を参照)。javascript 呼び出しなしで gmaps4rails(@json) をレンダリングすると、正常に動作します。ただし、ここでは JavaScript を使用する必要があります。これが私のファイルです。

CSS

.map_container {
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
  width: 100%;
}

.gmaps4rails_map {
  width: 100%;
  height: 400px;
}

.bing_map {
   position: absolute;
   top: 20;
   left: 10;
   width: 400px;
   height: 400px;
   border:#555555 2px solid;
}

 #map label { width: auto; display:inline; }
 #map img { max-width: none; }

見る

     #wizard-step-2-content.hide{ data: { step: 2 } }   
    .row
      = gmaps({:last_map => false })
      /- content_for :scripts do
      /  :javascript
      /    Gmaps.map.callback = function() {
      /      alert('asdf') // <-- I never see this alert
      /    }
      /= gmaps(@gmap_options)
      .span12.text-center
    .row
      #providers-thumbs
      = hidden_field_tag :selectedproviders, id: 'selectedproviders'
      /= share_on_facebook_timeline_checkbutton(f)
  .form-actions.pagination-centered

    = button_tag t('.previous_step'), type: 'button', class: 'btn btn-large hide', name: 'back_button', id: 'wizard-prev-step-button', disabled: true
    = f.submit t('.next_step'), type: 'button', class: 'btn btn-large btn-primary', name: 'next_button', id: 'wizard-next-step-button', disabled: false

モデル (mongoid で gmap4rails+geocoding を使用する例)

include Mongoid::Timestamps
  include Mongoid::Paranoia
  include Mongoid::Geospatial
  include Mongoid::MultiParameterAttributes
  include Mongoid::Slug
  include Gmaps4rails::ActsAsGmappable
  acts_as_gmappable :lat => 'latitude', :lon => 'longitude', :process_geocoding => true,
                    :check_process => :prevent_geocoding,
                    :address => "business_address"

コントローラ

   skip_before_filter :require_login, only: [:show, :search] 
  before_filter :check_permissions  
  respond_to :html, :json

  def getlocation    
    if request.post?
      session[:latitude] = nil
      session[:longitude] = nil
      session[:latitude] = params[:latitude] 
      session[:longitude] = params[:longitude]
      session[:categoryid] = params[:categoryid]  
      data  =   { :latitude => session[:latitude].to_f, :longitude => session[:longitude].to_f,:categoryid => session[:categoryid] }
      respond_to do |format|
      format.json  { render :json => data}
      end
    else  
      searchterm = session[:categoryid].to_s
      @places = Provider.all.near(:location [ session[:latitude].to_f,session[:longitude].to_f ]).within_circle(location: [[ session[:latitude].to_f,session[:longitude].to_f ], 150 ]).where(:category.to_s => /.*#{searchterm}.*/).entries     #where(session[:categoryid].in  =>  :category  )
      @json = @places.to_gmaps4rails 
      respond_to do |format|
      format.json  { render :json =>@places} 

      end
    end 
  end  

js.コーヒー

   wizardNextStep = ->

  categoryid = $("#categoryid").val()
  latitude =  $("#latitude").val()
  longitude = $("#longitude").val()
  markers = 
    lat: latitude
    lng: longitude
    picture: "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Chartreuse-icon.png"
    width: 30
    height: 30

  $.ajax
    url: "/providers/getlocation"
    data:
      latitude: latitude
      longitude: longitude
      categoryid:  categoryid    
    type: "POST"    
    success: (data) ->
     $.getJSON "/providers/getlocation", (json) ->  
      $(".map_container").show()
      Gmaps.map = new Gmaps4RailsGoogle()      
      Gmaps.load_map = ->     
        Gmaps.map.initialize()
        Gmaps.map.map_options.detect_location = false;
        Gmaps.map.map_options.center_on_user = true;
        Gmaps.map.addMarkers json  
        Gmaps.map.addMarkers(markers) 
        Gmaps.map.create_markers()
        Gmaps.map.adjustMapToBounds();
        Gmaps.map.callback();
      Gmaps.loadMaps()        
      #google.maps.event.trigger(map, 'resize')  

      $('#providers-thumbs').html ''
      index = 0
      #hizmetkutusu.latLngBounds = new google.maps.LatLngBounds()
      row_template = $("""<div class="span12" ></div>""")
      row = row_template
      $(json).each ->
        $('#providers-thumbs').append(row = row_template.clone(true)) if (index % 2) is 0
        color = routeColoursArray[index++ % routeColoursArray.length]
        #drawPath this, color
        this.borderColor = hexToRgba(color, 0.45) # borderColor injection, waiting for proper @data support in handlebars
        row.append HandlebarsTemplates['providers/thumbnail'](this)     
    failure: ->
      alert "Unsuccessful" 

Application.js.coffee.erb

#= require jquery
#= require jquery_ujs
#= require jquery.turbolinks
#= require turbolinks
#= require jquery.validate
#= require jquery.validate.additional-methods
#= require gmaps4rails/googlemaps.js 

# VENDOR ASSETS
#= require jquery.ba-throttle-debounce
# require waypoints

# CLIENT SIDE VALIDATIONS
#= require rails.validations
#= require rails.validations.turbolinks

Application.html.haml

!!!
%html{ lang: I18n.locale.to_s }
  %head{ prefix: "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# #{APP_CONFIG.facebook.namespace}: http://ogp.me/ns/fb/#{APP_CONFIG.facebook.namespace}#" }

    %title= yield_or_default :title, controller.action_name.titlecase
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' }
    = csrf_meta_tags
    = yield :head
    / Le HTML5 shim, for IE6-8 support of HTML elements
    /[if lt IE 9]
      = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"

    = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu:400,500,700|Pacifico', 'application', media: 'all'


    / Touch icons
    %link{ href: asset_path('apple-touch-icon.png'), rel: 'apple-touch-icon' }
    %link{ href: asset_path('apple-touch-icon-72x72.png'), rel: 'apple-touch-icon', sizes: '72x72' }
    %link{ href: asset_path('apple-touch-icon-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114' }
    %link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' }


    / Placed at the top of the document 'cause of turbolinks
    = javascript_include_tag 'http://maps.googleapis.com/maps/api/js?sensor=true&libraries=geometry,places', 'application'
    = analytics_init if APP_CONFIG.google_analytics_id.present?

  %body
    /= yield :scripts
    = render 'shared/navbar'    
    #main-container.container= yield     

    #footer= render 'shared/footer'

私が何をしても、それを機能させることはできません。yield:scripts を追加してみました。コールバック関数を含め、中央にマップをトリガーし、ユーザーの位置を見つけることを無効にしました..うまくいきませんでした... googlemaps.js と gmaps4rails.googlemaps.js.coffee は既に含まれています。それらをアプリケーションファイルに含めてみました。gem を 2.0.0 にアップグレードしてから、通常にダウングレードします。関数の上にロードマップを配置する前は部分的に機能していましたが、今では上または下に配置しても機能しません。コードがめちゃくちゃになりました。片付けられない！私を助けてください：/