Question

我在单个Bootstrap行中使用两个设置大小的Google地图，分为两个＆＃34; col-md-6＆＃34;。问题是我无法将地图放在列中心。

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

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

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

我也尝试过Bootstraps中心块类。

为什么要赢得这项工作？是因为地图是由脚本生成的吗？但是我也使用了其他一些脚本小部件，我可以没有问题。

这是我的代码：

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

在bootstrap列中居中Google地图

1 个答案: