如何使用引导程序嵌入谷歌地图？答案

【问题标题】：How to embed google map using bootstrap?如何使用引导程序嵌入谷歌地图？
【发布时间】：2015-01-06 14:18:56
【问题描述】：

我想在我的联系页面的“地图和方向”中添加一张地图。我正在逐步尝试谷歌地图嵌入程序，但它不起作用，因为我无法查看地图。我正在使用引导程序。

这是我的标记：

    <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>

【问题讨论】：

将这两个脚本放在你的 HEAD 标签中。请务必在 CSS 中定义地图容器的宽度和高度。
（重新）在 shown.bs.tab 事件的处理程序中初始化地图。
另见stackoverflow.com/a/6879644/3342739
@cvrebert 我也按照你的链接尝试显示地图，但它没有工作

标签： javascript twitter-bootstrap google-maps twitter-bootstrap-3

【解决方案1】：

试试这个代码，它在引导程序中工作正常

function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(28.1823294, -82.352912),
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                scrollwheel: false,
                draggable: false,
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true,
                rotateControl: true,
            };
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        }
google.maps.event.addDomListener(window, 'load', initialize);

#contactform .btn:hover {
  background: rgba(9,8,77,0.7);
}

#map-canvas {
  width: 100%;
  height: 300px;
  margin-bottom: 15px;
  border: 2px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
            
<div id="map-canvas"></div>
    
<!--Google Maps API-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnycWatbGyK6ldFqErjFtko1yeMclNUOA&amp;sensor=true"></script>

请使用正确的谷歌地图 API，您可以从谷歌地图控制台获取。

【讨论】：

【解决方案2】：

感谢@ymakux 评论“最好使用内置类” 我一直在寻找很久以来希望将 Google 地图整齐地放入引导 div 中，而您的答案是完美的！所以对于像我这样的新手来说，使用 Google 在https://developers.google.com/maps/documentation/javascript/geolocation提供的示例代码使用带有 Bopotstrap 的地图@

按照@ymakux 的建议添加 div，就在类似于此的映射 div 之前：

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

【讨论】：

谢谢 - 现已修复，但 @ymakux 需要功劳 - 他的评论是我的救星，但在此线程中就像大海捞针一样隐藏起来。

【解决方案3】：

您的引导元素正在阻止您的地图显示。

<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>

一点 CSS

#map-container{
    height: 500px;
    width: 500px;
}

您的地图将随之显示。

我也不会将您的地图调用放在您的 HEAD 标记中。让页面加载，然后加载地图。

一旦你的地图显示出来，慢慢添加引导组件，因为它们可以用谷歌地图做一些奇怪的事情。尤其是网格布局。如果您保留网格布局并且看不到地图，请调整浏览器的大小（单击角落并拖动它），您应该能够击中最佳位置以显示地图。

【讨论】：

最好使用内置类