Google Maps API not showing with bootstrap elements and fixed navbar

Question

I'm using Google Maps API with Bootstrap 3.3.7. and can't seem to find a working solution for implementing map into my col-md-6 . Problem is, I can't put

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

because I'm using fixed navbar, therefore I need padding.

Map shows on a page if it's the only thing besides the navbar

Code here:

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

PS #contprvi is custom css that puts this container on the left side of the screen also, "ukljuci" is code that is working just fine on my other page

Answer 1

You need to set fixed height

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

Google Maps API not showing with bootstrap elements and fixed navbar

Question

1 answers

solution1
2 ACCPTED 2016-12-29 20:24:54

Google Maps API not showing with bootstrap elements and fixed navbar

Question

1 answers

solution1 2 ACCPTED 2016-12-29 20:24:54

solution1
2 ACCPTED 2016-12-29 20:24:54