センターGoogleのブートストラップ列内のマップ

Question

私は、2つの "col-md-6"に分割された単一のブートストラップ行内にサイズが設定された2つのGoogleマップを使用しています。問題は、マップを列内に中央に配置できないということです。

私は別の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

必要なのは、divをハウジングGoogleマップ上text-align:centerです。