谷歌地图，Rails和Jquery

更新7/17已解决

我已将我的代码更新为Solved版本。

原始问题

我正试图通过Gem gmaps4rails显示谷歌地图。 在研究了此处和此处发布的以下2个问题之后，Google地图似乎存在一个问题，该选项卡隐藏并显示来自Jquery或Javascript的内容，并且如果没有Jquery中的某些代码，则无法正确显示Google Map。

我坚持在我的JavaScript中调整地图大小可以有人指出我的错误？

谢谢！

我的代码：

使用Javascript

 $(document).ready(function(){ //Default Action $(".gear_tab_content").hide(); //Hide all content $("ul.gear_page_tabs li:first").addClass("active").show(); //Activate first tab $(".gear_tab_content:first").show(); //Show first tab content $(".map_container").hide(); //Hide the Google Map //On Click Event $("ul.gear_page_tabs li").click(function() { $("ul.gear_page_tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".gear_tab_content").hide(); //Hide all tab content var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content if(activeTab == '#GearLocation') { $(".map_container").show(); Gmaps.loadMaps(); Gmaps.map.addMarkers(json); google.maps.event.trigger(Gmaps.map, 'resize'); } return false; }); });  

我的看法

调节器

  def show @gear = Gear.find(params[:id]) @storegear = @gear.user.gears.all(:order => 'created_at DESC', :limit => 6) @comments = @gear.comments.all @user = @gear.user @store = @gear.user.store.id @json = @gear.to_gmaps4rails respond_to do |format| format.html format.json { render :json => @json } end end 

路线

  gears GET /gears(.:format) gears#index POST /gears(.:format) gears#create new_gear GET /gears/new(.:format) gears#new edit_gear GET /gears/:id/edit(.:format) gears#edit gear GET /gears/:id(.:format) gears#show PUT /gears/:id(.:format) gears#update DELETE /gears/:id(.:format) gears#destroy /gear(.:format) gears#index 

再次感谢。

Answer 1

当您显示/隐藏/调整Google地图地图的大小时，您需要调用地图的resize事件。 Soyou应该在显示之后添加它：

 ... Gmaps.map.addMarkers(json); google.maps.event.trigger(Gmaps.map, 'resize'); ... 

我假设Gmaps.map是google.maps.Map类的一个实例…