Javascript 如何使用bootstrap嵌入谷歌地图？_Javascript_Twitter Bootstrap_Google Maps_Twitter Bootstrap 3

Javascript 如何使用bootstrap嵌入谷歌地图？

javascript twitter-bootstrap google-maps twitter-bootstrap-3

Javascript 如何使用bootstrap嵌入谷歌地图？,javascript,twitter-bootstrap,google-maps,twitter-bootstrap-3,Javascript,Twitter Bootstrap,Google Maps,Twitter Bootstrap 3,我想在联系人页面的地图和方向中添加地图。我正在一步一步地尝试谷歌地图嵌入程序，但没有成功，因为我无法查看地图。我正在使用引导这是我的分数： <head> <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script> <

我想在联系人页面的地图和方向中添加地图。我正在一步一步地尝试谷歌地图嵌入程序，但没有成功，因为我无法查看地图。我正在使用引导

这是我的分数：

    <head>
      <script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>
      <script>
    $(document).ready(function() {

        var myCenter=new google.maps.LatLng(45.992261, -123.925014);
        var marker=new google.maps.Marker({
            position:myCenter
        });

        function initialize() {
          var mapProp = {
              center:myCenter,
              zoom: 14,
              draggable: false,
              scrollwheel: false,
              mapTypeId:google.maps.MapTypeId.ROADMAP
          };

          var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
          marker.setMap(map);

          google.maps.event.addListener(marker, 'click', function() {

            infowindow.setContent(contentString);
            infowindow.open(map, marker);

          }); 
        };

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            initialize();
        });

    });
    </script>
   <style type="text/css">
        #map-canvas {
            height:500px;
         }
    </style>
  <head>
    <div class="tab-content">
        <div class="tab-pane fade" id="map">
            <div class="col-md-5">
                <h4 class="h4">Find Us at Google Map</h4>               
            </div>
            <div id="map-canvas" class="col-md-7">
            </div>
        </div>
    </div>

引导程序元素阻止地图显示

<div>        
  <div style="border: 1px solid red;">
      <h4 class="h4">Find Us at Google Map</h4>               
  </div>
  <div id="map-container">
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  </div>     
</div>

您的地图将与此一起显示

我也不会把你的地图电话放在你的头标签上。让页面加载，然后加载地图

一旦你的地图显示出来，慢慢地添加引导组件，因为他们可以用谷歌地图做一些奇怪的事情。特别是网格布局。如果打开栅格布局，但看不到地图，请单击角点并拖动它，调整浏览器的大小，这样您就可以点击最佳点来显示地图

试试这段代码，它可以很好地用于引导

函数初始化{ 变量映射选项={ 中心：新google.maps.LatLng28.1823294，-82.352912，缩放：9， mapTypeId:google.maps.mapTypeId.HYBRID，滚轮：错误，可拖动：错误，泛控制：对，动物控制：对， mapTypeControl:true， scaleControl：对，街景控制：对， overviewMapControl:true，旋转控制：对， }; var map=new google.maps.Mapdocument.getElementByIdmap-canvas，mapOptions； } google.maps.event.AddDomainListenerWindow“加载”，初始化； contactform.btn：悬停{ 背景：rgba9,8,77,0.7； } 地图画布{ 宽度：100%；高度：300px；边缘底部：15px；边框：2个实心fff； }

@ymakux评论，最好使用内置的类，我一直在拖网，所以多年来一直在寻找一个谷歌地图，以整齐地适应一个引导div，你的答案是完美的！所以对于像我这样的新手来说，使用Bopotstrap的地图可以利用google在

在映射div之前添加@ymakux建议的div，如下所示：

<div class="embed-responsive embed-responsive-4by3">
<div id="map-container" class="embed-responsive-item">
<div id="map">
</div>
</div> 
</div>`

将两个脚本都放在HEAD标记中。请确保在CSS中定义地图容器的宽度和高度。在Showed.bs.tab事件的处理程序中重新初始化地图。另请参见@cvrebert我也跟随您的链接尝试显示地图，但它不起作用最好使用内置类谢谢-现在已修复，但@ymakux需要信任-他的评论是我的救世主，但像俗话说，大海捞针就是这根线。

<div class="embed-responsive embed-responsive-4by3">
<div id="map-container" class="embed-responsive-item">
<div id="map">
</div>
</div> 
</div>`