1

I'm using gmaps4rails with mongoid and bootstrap. when I click on the next step button to load the map by ajax call the map doesn't appear fully on the canvas(see attached pic). It works normally when I render gmaps4rails(@json) without the javascript call. But I need to use javascript here. Here are my files.

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

view

     #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

model(example for using gmap4rails+geocoding with mongoid)

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"

controller

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

   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'

first page

second page

What ever I do I cannot get it work. I tried by adding yield:scripts, included callback function, triggered map on center, disabled finding user's position..didn't work... googlemaps.js and gmaps4rails.googlemaps.js.coffee are already included. Also tried by including them on application file. upgrade the gem to 2.0.0 then downgraded to normal. It worked partially before when I put the loadmaps on top of the function but now it doesn't work even I put it on top or bottom. Code became mess now. I can't sort it out! Please help me:/

0

1 Answer 1

0

No one helped me so I tried and found a dirty solution. The problem was in wizard-step-2-content's hide() function. I didn't hide the content, I just hided and showed the row and it started working without callback, triggering reize or anything else written before.

view

 #wizard-step-2-content{ data: { step: 2 } }   
    #xxx1.row.hide()
      = gmaps({:last_map => false })
      .span12.text-center
    .row
      #providers-thumbs
      = hidden_field_tag :selectedproviders, id: 'selectedproviders'
      /= share_on_facebook_timeline_checkbutton(f)
  .form-actions.pagination-centered

coffee

wizardNextStep = ->
  $("#wizard-step-#{2}-content").fadeIn()
  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:  ->
     $.getJSON "/providers/getlocation", (json) ->        
      Gmaps.map = new Gmaps4RailsGoogle()            
      Gmaps.load_map = ->     
        Gmaps.map.initialize()
        Gmaps.map.addMarkers json  
        Gmaps.map.addMarkers(markers)  
      Gmaps.loadMaps()  
      $('#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"  

  arr = new Array()
  $('#providers-thumbs').on 'click', '#givequote', (e) ->
    #e.preventDefault()
    value1 = $("#selectedproviders").val()
    value2 = $(this).data('id')  

    if value1.indexOf(value2) > -1
      arr.splice $.inArray(value2, arr), 1
    else
      arr.push value2

    $("#selectedproviders").val arr     
  $("#xxx1.row").show()   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.