CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapgoogle-mapstwitter-bootstrap-3
JulioBordeaux
JulioBordeaux

Reputation: 504

How to make google maps fit the mobile device screen

I am trying to make mobile application, where some part of the screen is covered with some pictures and the other part with google map.

Heres the code:

HTML: 

<div class="container-fluid">

  <div class="row">      
    <img id="map-pic" class="img-responsive"  src="http://placehold.it/100x140"/>
    <h4 id="map-text" class="text-center"><strong>Title of the picture</strong></h4>
  </div>

  <div class="row">
    <div id="map"></div>

  <script>
  var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 32.156186, lng: 119.131371},
    zoom: 10
  });
}
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyC1c2qJxUcmMzZQdk3yl1p0FhT4pxYgqx4&callback=initMap"
        async defer></script>
    </div>
</div>

CSS:

#map{
  width: 100%;
  height: 100%;
}
#map-pic{
  float:left;
}
#map-text{
  padding-top:5rem;
}

The problem is that the height of the map becomes is the same as whole screen's instead of filling the empty space. How could i resolve this?

Upvotes: 0

Views: 1997

Answers (1)

luke_mclachlan
luke_mclachlan

Reputation: 1054

You could try the following solution, which works for me in filling the rest of the page with the map. Some solutions set the overflow as hidden, but the danger with those methods is that the Terms of Use and Google logo are then hidden (not good!).

css:

body {
    margin: 0px;
    padding: 0px;
}
#map {
  width: 100%;
  height: 100%;
}
#container-fluid
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #DDD;
    padding-top: 200px;
}
#header
{
    background-color: #FFF;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

body:

<div id="container-fluid">
    <div id="header">
        <img id="map-pic" class="img-responsive"  src="http://placehold.it/100x140"/>
    <h4 id="map-text" class="text-center"><strong>Title of the picture</strong></h4>
    </div>
    <div id="map"></div>
    <script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 32.156186, lng: 119.131371},
        zoom: 10
      });
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&AIzaSyC1c2qJxUcmMzZQdk3yl1p0FhT4pxYgqx4&callback=initMap" async defer></script>
</div>

This doesn't work in the older IE browser (6 and before) but I wouldn't worry about that. I suppose the only drawback is that the header is a fixed height, and when you change the height you also have to change the padding of the #container-fluid.

Upvotes: 1

Related Questions