Question

我正在使用带有Bootstrap 3.3.7的Google Maps API。并且似乎无法找到一个有效的解决方案来实现我的col-md-6地图。问题是，我无法提出

html, body, #map {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

因为我使用固定的导航栏，所以我需要填充。

如果除了导航栏之外，地图就会在页面上显示

代码在这里：

<body>
  <div class="outer">
    <div class="top">
      <div id="ukljuci"></div>
      <div class="container-fluid">
        <div class="row">

          <div class="col-md-6" id="contprvi">
          some text just for demo.
          </div>

          <div class="clearfix visible-md"></div>

          <div class="clearfix visible-md"></div>

          <div class="col-md-6" id="contzadnji">
            <div id="map" style="width: 100%; height: 100%"></div>
          </div>

      </div>
      </div><!-- container-fluid -->
    </div> <!-- top -->
</div> <!-- outer -->

<script>

function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAPdCPG3NTb-GtlywfSQaHMnMCjKnLB6rk&callback=initMap">
</script>


 <script>
    $( "#ukljuci" ).load( "izbornik_complete.php #nas_navbar" );
</script>

</body>

P.S。 #conprprvi是自定义css，它将此容器放在屏幕的左侧还有，＆＃34; ukljuci＆＃34;是在我的其他页面上正常工作的代码

Answer 1

您需要设置固定高度

      <div class="col-md-6" id="contzadnji">
        <div id="map" style="width: 100%; height: 300px"></div>
      </div>

Google Maps API未显示引导元素和固定导航栏

1 个答案: