CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgoogle-maps
bchards
bchards

Reputation: 401

How to make Google Maps Responsive?

I am trying to add Google Maps to a web page, however it has a fixed width and height, from the code using Googles tutorial. My HTML in the head is this:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
        var mapCanvas = document.getElementById('map');
        var myLatLng = {lat: 51.434408, lng: -2.53531};
        var mapOptions = {
            center: new google.maps.LatLng(51.434408, -2.53531),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello Wold'
});
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

The HTML in the body is this:

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

The CSS thats related is this:

#map {
width: 1140px;
height: 300px;
}

I am using bootstraps column method to layout and make my page responsive, at all sizes I would like the map to take up all 12 columns of the row that it is in. Any ideas?

Thanks!

Upvotes: 3

Views: 13571

Answers (4)

Supriya
Supriya

Reputation: 581

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
<div class="map-responsive">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Upvotes: 0

bchards
bchards

Reputation: 401

So, I found a solution to my question. Here is my revised CSS:

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

I found that you have to have a height of a certain amount of pixels, using 100% or another percentage would make the map disappear, however the width 100% makes the map respond to resizing the browser. The HTML has been left the same.

Upvotes: 9

Nithya Neela
Nithya Neela

Reputation: 75

Already this question has discussed in our forum. Have a look at it: Google Maps with Bootstrap not responsive

Use the bootstrap class "span12" it will help you for responsive and include display: block; property for #map id selector.

Upvotes: 0

Elow
Elow

Reputation: 597

Have you tried use %?

#map {
   width: 100%;
   height: 30%;
}

That should work :)

HTML:

<div class="row">
   <div class="col-xs-12">
      <div id="map"></div>
   </div>
</div>

Upvotes: 0

Related Questions