更新 7/17 解決済み
コードを解決済みバージョンに更新しました。
元の質問
Gem gmaps4rails を介して Google マップを表示しようとしています。こことここに投稿された次の 2 つの質問を調査した後、Google マップには、Jquery または Javascript のコンテンツを非表示および表示するタブに問題があり、Jquery にコードがないと Google マップが正しく表示されないようです。
javascript でマップのサイズを変更することに行き詰まっています。エラーを指摘してもらえますか?
ありがとう！
私のコード:
Javascript
<script>
$(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;
});
});
</script>
私の見解
<div id="GearLocation" class="gear_tab_content">
<%= gmaps4rails(@json) %>
</div><!-- End GearLocation -->
コントローラ
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
再度、感謝します。