Javascript 谷歌地图在引导模式中以灰色显示

我使用“Bootstrap v3.3.5（） 版权所有2011-2015年Twitter，Inc.“我的网站，我想添加谷歌地图。我运行这个代码，所有的地图都是灰色的。我不明白为什么这不适用于modal。有人能帮我吗

我还包括了

HTML:

---

这是上面的代码，在一个工作的小提琴中->（bootstrap 3.3.5）

显示模式后，触发google maps

resize

事件：

$（'#contact'）.on（'show.bs.modal'，function（）{
google.maps.event.trigger（map，“resize”）；
});

触发“调整大小”对我不起作用。地图出现了，但坐标和缩放级别都不正确。您的页面上可能有一个initMap函数。这对我很有用：

<script>
    $('#myModal').on('shown.bs.modal', function () {
        initMap();
    });
</script>

$（'#myModal'）.on（'show.bs.modal'，function（）{
initMap（）；
});

试试这个新手解决方案

位置自动完成
#地图{
高度：450px；
宽度：1080px；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
.控制{
边缘顶部：10px；
边框：1px实心透明；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
高度：32px；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
}
#pac输入{
背景色：#fff；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
左边距：12px；
填充：0 11px 0 13px；
文本溢出：省略号；
宽度：300px；
}
#pac输入：焦点{
边框颜色：#4d90fe；
}
.pac集装箱{
字体系列：Roboto；
}
#类型选择器{
颜色：#fff；
背景色：#4d90fe；
填充：5px11px 0px 11px；
}
#类型选择器标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
.莫代尔{
显示：块；
z指数：1；
填充顶部：20px；
填充底部：20px宽度：100%；
身高：100%；
溢出：自动；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.模态内容{
背景色：#fefe；
左边距：60像素；
边缘底部：20px；
填充：0；
边框：1px实心#888；
宽度：90%；
身高：90%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：4s；
动画名称：animatetop；
动画持续时间：4s
}
@-webkit关键帧动画顶点{
从{
顶部：-900px；
不透明度：0
}
到{
排名：0；
不透明度：1
}
}
@关键帧动画顶点{
从{
顶部：-900px；
不透明度：0
}
到{
排名：0；
不透明度：1
}
}
.结束{
颜色：白色；
浮动：对；
字体大小：40px；
字体大小：粗体；
边缘顶部：10px；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#a8c9ff；
颜色：白色；
}
.模态体{
填充：2x16px；
背景色：白色；
颜色：黑色；
}
.模态页脚{
填充：2x16px；
背景色：#a8c9ff；
颜色：白色；
}
好啊
搜索位置并单击“确定”
注意：如果地图未加载属性，请单击！（单击位置以选择或拖动标记以定位。）
全部的
机构
地址
地理编码
函数initMap（）{
var$Location=document.getElementById（'Location'）；
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:-33.8688，lng:151.2195}，
缩放：13
});
google.maps.event.trigger（映射，'resize'）；
变量输入=/**@type{！HTMLInputElement}*/(
document.getElementById（'pac-input'）；
var types=document.getElementById（'type-selector'）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
map.controls[google.maps.ControlPosition.TOP\u LEFT].push（类型）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
var infowindow=new google.maps.infowindow（）；
var marker=new google.maps.marker({
地图：地图，
主播点：新google.maps.Point（0，-29），
德拉格布尔：是的
});
autocomplete.addListener（'place\u changed'，function（）{
infowindow.close（）；
marker.setVisible（假）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
window.alert（“没有可供输入的详细信息：“+place.name+””）；
返回；
}
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；
}
marker.setIcon（/**@type{google.maps.Icon}*/({
url:place.icon，
大小：新建google.maps.size(
<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)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

#map {
  width: 500px;
  height: 400px;
}

<script>
    $('#myModal').on('shown.bs.modal', function () {
        initMap();
    });
</script>