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'
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:/