相关疑难解决方法(0)

我有一个使用Javascript API V3设置的谷歌地图.它显示在具有动态宽度的div中,因为当我们单击标记时内容窗格会向上滑动.

一切正常,但有一点:当窗格向上滑动时,地图的宽度会发生变化,因此中心向右移动(窗格在左侧).它真的很不方便,特别是对于小分辨率,在窗格打开后你甚至看不到中心.

我尝试了'调整大小'触发器,但它似乎不起作用......有什么想法吗？

非常感谢 !

我正在开发Rails中的Web应用程序.当我打开标记时,会在框中弹出一个带有街景的模态.我可以打开一个或两个标记,但之后我得到一个WebGL遇到障碍的错误.我试图在网上寻找资源,但没有任何意义.有关详细信息,请参见下面的图片.任何帮助将不胜感激.

第一张图片有错误

这是我的控制台日志的图像:

这是我的webapp中的JavaScript代码.

<script type="text/javascript">
var handler = Gmaps.build('Google', {
    markers: {
        clusterer: {
            gridSize: 60,
            maxZoom: 20,
            styles: [
                {
                    textSize: 10,
                    textColor: '#ff0000',
                    url: 'assets/creative/m1.png',
                    height: 60,
                    width: 60,
                },
                {
                    textSize: 14,
                    textColor: '#ffff00',
                    url: 'assets/creative/m2.png',
                    height: 60,
                    width: 60,
                },
                {
                    textSize: 18,
                    textColor: '#0000ff',
                    url: 'assets/creative/m3.png',
                    width: 60,
                    height: 60,
                },
            ],
        },
    },
});

var handler2 = Gmaps.build('Google');
var current;
function initialize() {
    handler.buildMap({ internal: {id: 'map'} }, function () {
        markers_json = …

我为我的网站使用"Bootstrap v3.3.5(http://getbootstrap.com)Copyright 2011-2015 Twitter,Inc.",我想添加google-map.我运行此代码,所有地图都是灰色的.我不明白为什么这不适用于模态.有人能帮我吗 ？我也有包括

HTML

<body>
      <a class="openmodal" href="#contact"  data-toggle="modal" data-id="Peggy Guggenheim Collection - Venice">Contact</a>
      <div class="modal fade" id="contact" role="dialog" >
            <div class="modal-dialog modal-lg">
                <div class="modal-content" id="back" >  
                    <div class="modal-header">
                    <h4>Contact<h4>
                </div>
                <div class="modal-body">    
                    <div id="map"></div>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-default" data-dismiss="modal">Close</a>
                </div>      
            </div>
      </div>
 </body>

JavaScript的

 <script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions) …

GoogleMaps显示为灰色框而不是地图.并在Windows上调整大小,它正常工作.
在窗口加载地图上显示如下:

窗口调整大小地图正常工作后:

<div style="width:100%; height:400px; padding:0; margin:0; border:3px solid gainsboro; border-radius:3px;">
    <div id="canvas" style="width:100%; height:100%; padding:0; margin:0;"></div>
 </div>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
<script>
 var map;
 var latLong;
 $(window).load(function () {
    latLong = new google.maps.LatLng(47.0303105, 28.815481);
     map = new google.maps.Map(document.getElementById('canvas'), {
         center: latLong,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         zoom: 14
     });
            console.log("Map is ready.")
 });
</script>

PS Map在bootstrap模式div中声明
感谢您的帮助.