Twitter API Question posted in
The official Twitter API documentation can be found here.

Google Maps displays as thin line in Bootstrap column – Twitter API

All the code is here and you can run it locally, just open up qibla.html:

https://github.com/readyready15728/qibla-finder

I tried another suggestion about getting the map to display here:

Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag

I can see it in my Bootstrap example but it’s just a very thin line for me. I’m really not sure where to go from here. What do I do to preserve relative sizing and still get it to display? Pixels work but I want it to be responsive.

EDIT: Here is the JSFiddle someone requested: https://jsfiddle.net/ygsfeba9/

And here’s what the HTML looks like:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="text-center">Interactive Qibla Finder</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-8">
        <div id="map"></div>
      </div>
      <div class="col-md-4">
        <p>Blah blah blah, here's where the controls and output will go.</p>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
  var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 1
  });
}
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAnAdXjgiEX08RLBbMle9X_WWN4BzNHBg&callback=initMap"
    async defer></script>
</body>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The best outcome using relative units appears to be with the following CSS:

    #map {
  width: 100%;
  height: 75vh;
}

    Alter vertical height units to taste.


  2. 0

    You should not have #map position set to absolute. If you do so, you will have to make its parent element col-md-8 position relative, and have height property to 500px or so. 

    #map {
  width: 100%;
  height: 500px;
}

    fiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search