Google Maps，Rails和Jquery [英] Google Maps, Rails and Jquery

问题描述

更新7/17已解决

我已经将代码更新为已解决的版本.

I've updated my code to the Solved version.

原始问题

Original Question

我正试图通过Gem gmaps4rails显示Google Maps.研究了以下两个发布的问题后，此处似乎Google Maps的标签存在问题，该标签隐藏并显示了Jquery或如果没有Jquery中的某些代码，将无法使用Javascript正确显示Google Map.

I'm trying to show Google Maps via the Gem gmaps4rails. After researching the following 2 questions that were posted here & here it seems Google Maps has issues with a tab that hides and shows content from Jquery or Javascript and will not display a Google Map properly without some code in the Jquery.

我一直无法在JavaScript中调整地图的大小，有人可以指出我的错误吗?

I'm stuck on resizing the map in my javascript can someone point out my errors?

谢谢！

我的代码:

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

再次感谢.

推荐答案

当您显示/隐藏/调整Google Maps地图的大小时，您需要调用地图的resize事件. 因此，您应该在显示后添加它:

When you show/hide/resize a google maps map you need to call the resize event of the map. Soyou should add it after showing it:

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

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

I'm assuming that Gmaps.map is an instance of google.maps.Map class...

这篇关于Google Maps，Rails和Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！