在引导列中居中 Google 地图

Question

我在一个单独的 Bootstrap 行中使用两个设置大小的 Google 地图，分成两个“col-md-6”。问题是我无法让地图在列中居中。

我尝试将地图放置在另一个 div 中，并应用如下类：

.centre {
    margin-left: auto;
    margin-right: auto;
}

我在包含的 div 和地图画布本身上使用了这种方法。

我也尝试过 Bootstraps center-block 类。

为什么这不起作用？是不是因为地图是脚本生成的？不过我也使用了一些其他的脚本小部件，我可以毫无问题地居中。

这是我的代码：

<div class="row">
<div class="col-md-6">
    <div class="center-block">
        <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
        <div style='overflow:hidden;height:400px;width:400px;'>
            <div id='gmap_canvas' style='height:400px;width:400px;'></div>
            <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
        </div>
        <a href='https://embed-map.org/'>adding google maps to website</a>
        <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=de6f66c1083e8292c0be178f836c7b9580eaf39f'></script>
        <script type='text/javascript'>
            function init_map() {
                var myOptions = {
                    zoom: 14,
                    center: new google.maps.LatLng(53.5963138,-2.2334897000000637),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(53.5963138,-2.2334897000000637)
                });
                infowindow = new google.maps.InfoWindow({
                    content: '<strong>The Cherwell Wellbeing Hub</strong><br>Cherwell Avenue<br>OL10 4SY Heywood<br>'
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
                infowindow.open(map,marker);
            }
            google.maps.event.addDomListener(window, 'load', init_map);
        </script>
    </div>
</div>
<div class="col-md-6">
    <div class="center-block">
        <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
        <div style='overflow:hidden;height:400px;width:400px;'>
            <div id='gmap_canvas1' style='height:400px;width:400px;'></div>
            <style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
        </div>
        <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=79bf837985bd36410db02fbfc1b92f01d77d4475'></script>
        <script type='text/javascript'>
            function init_map() {
                var myOptions = {
                    zoom: 14,
                    center: new google.maps.LatLng(53.41196129999999,-2.7916708999999855),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('gmap_canvas1'), myOptions);
                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(53.41196129999999,-2.7916708999999855)
                });
                infowindow = new google.maps.InfoWindow({
                    content: '<strong>Grenfell House</strong><br>Widness Road<br>WA8 6AX Widnes<br>'
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
                infowindow.open(map,marker);
            }
            google.maps.event.addDomListener(window, 'load', init_map);
        </script>
    </div>
</div>
</div>

Answer 1

我工作得很好：http://codepen.io/ruchiccio/pen/LZZJaP

您只需要text-align:center 位于包含谷歌地图的 div 上。