Google Maps v3显示Jquery和Bootstrap导致地图错误(Rails 4) [英] Google Maps v3 shows map wrong with Jquery and Bootstrap (Rails 4)

问题描述

我有一个Rails 4应用，正在使用Bootstrap.我想显示一个Google Maps v3地图.我成功完成了此操作，但现在我想在div容器中显示此地图，该容器最初是隐藏的，位于Bootstrap行和span div中.因此，当用户单击显示地图"按钮时，将显示div，其中包含地图.

I have a Rails 4 app and I´m using Bootstrap. I want to show a Google Maps v3 map. I succeed to do it, but now I want to show this map inside a div container which is initially hidden and is inside a Bootstrap row, and span divs. So, when a user clicks on a "show map" button, then the div is shown with the map inside.

当用户单击按钮时，我可以显示div，但是地图显示不正确.我只能在div的左上角看到一个约200像素的小正方形地图，而div的其余部分为灰色.控件也显示错误.

I can show the div when the user clicks the button, but the map is not displayed correctly. I can see only an small squared map around 200px in the upper-left corner of the div, and the rest of the div is grey. The controls are also displayed wrong.

我看到有很多有关此问题的条目，但是，到目前为止，我仍无法解决.

I see there are many entries with this problem, but, I couldn´t fix it so far.

我不确定问题是否是由于引导程序引起的(我看到一则帖子，他们说您必须覆盖某些img样式.我已经这样做了)还是问题是否与调整地图大小有关.但是事实是我无法正确显示它.

I´m not sure if the problem is because of bootstrap (I saw a post where they say you have to overwrite some img style. I already did it) or if the problem is related to resizing the map. But the fact is I can´t show it properly.

请帮助.

我的代码:

轨道视图:

    <div class="row">               
         <div class="span12">

                <!--Map div -->     
                <div class="sliding-map">                           
                    <dl class="dl-horizontal">
                        <dt>Latitude:</dt>
                        <dd><%= option.latitude%></dd>
                         <dt>Longitude:</dt>
                        <dd><%= option.longitude%></dd>
                         <dt>Address:</dt>
                        <dd><%= option.address%></dd>
                    </dl>                                           

                    <div class="map_container">
                        <div id="map-canvas" style="height: 500px; width: 926px"></div>     
                    </div>                   
                </div>
            </div>
        </div>      

JavaScript:

Javascript:

    // Shows and hide info, rating and maps divs.
    $(document).ready(function(){                       

        $(".show-on-hover").hide();                               
        $(".sliding-map").hide();                                           

        $('.show_map').click(function() {
            $(".sliding-map").slideToggle();
        });



        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);                                       
    });

和CSS:

 html, body, #map-canvas {
 margin: 0;
  padding: 0;  
}

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

.map_container img{max-width: none;}

推荐答案

我已修复它！

只需添加

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

到显示div的函数，如下所示:

to the function that is showing the div, like this:

$('.show_map').click(function() {
     $(".sliding-map").slideToggle();
     google.maps.event.trigger(map, 'resize'); 
});

这篇关于Google Maps v3显示Jquery和Bootstrap导致地图错误(Rails 4)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！