CODEWITHSUNDEEP
htmlcssgoogle-maps-api-3twitter-bootstrap
waely
waely

Reputation: 525

Google Maps with Bootstrap not responsive

I'm using bootstrap and I embedded Google Maps API 3.

#map_canvas isn't responsive; it's a fixed width.

Also, if I use height: auto and width: auto the map doesn't show up in the page.

Why?

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
#map_canvas {
   height: 400px;
    width: auto;
  }
</style>

<div class="container">
 <div class="row">
  <div class="span6">
   <div id="map_canvas"></div>
  </div>
 </div>
</div>

Upvotes: 50

Views: 73493

Answers (11)

Kantradiction
Kantradiction

Reputation: 11

For those embedding using the javascript api (not iframe):

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

.googleMapContainer {
    position: relative;
    &:after {
      content: "";
      display: block;
      padding-bottom: 100%;
    }
}

#map {
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  overflow: hidden;
}

Upvotes: 1

Dexter
Dexter

Reputation: 9314

09 2021

It's been 8yrs since the question is asked.
If any of you still looking for the solution and couldn't find it, here it is.

Boostrap 5 (tested and works)

Add width="100%" to the Google Map iframe

<div class="row">
    <div class="col-6">
        <iframe src="SOURCE" width="100%" OTHER_ATTRIBUTES></iframe>
    </div>
</div>

Upvotes: 2

philyawj
philyawj

Reputation: 151

This blog post has a great solution.

Add a div tag around the embed code. Use the CSS class map-responsive so that your code now looks like this:

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

Now add some CSS properties inside one of your stylesheet files:

.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;
}

Upvotes: 0

chech
chech

Reputation: 1105

makes the map resize in both height and width:

http://niklausgerber.com/blog/responsive-google-or-bing-maps/

2018/09/27 update: link is reportedly down, not sure for how much, so I'll link my web archive search to his github:

https://github.com/niklausgerber/responsive-google-or-bing-maps

Upvotes: 10

Andrei Surdu
Andrei Surdu

Reputation: 2341

REVISED: The Official Post is outdated, so I've updated my answer and improved the code.

The following method does not require bootstrap or any other framework. It can be used independently to make any content responsive. To the parent element is applied a padding by calculating the aspect ratio. Then the child element is placed on top using absolute position.

The HTML:

<div class="iframe-container">
    <!-- embed code here -->
</div>

The CSS:

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

The following 'fiddle' has examples on how to make:

  • Responsive Google Map
  • Responsive OpenStreetMap
  • Responsive Vimeo Video
  • Responsive Youtube Video

Demo: http://jsfiddle.net/LHQQZ/135/

Upvotes: 101

jaymar
jaymar

Reputation: 1

<div class="map_container">
    <div id="map" class="gmaps4rails_map">
        <div id="map_canvas" class="span9">
            <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
        </div>
    </div>

Upvotes: 0

sparkyspider
sparkyspider

Reputation: 13519

Extremely simple. Make the map relative to viewport height using CSS:

.map {
  height: 80vh;
}

This specifies that the .map container must be 80% of the viewport height.

Upvotes: 10

Leonardo
Leonardo

Reputation: 2225

This uses Bootstrap's Responsive Embed feature with fixed aspect ratio of 16/9:

<div class="embed-responsive embed-responsive-16by9">
    <div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div>
</div>

Upvotes: 27

horizontala
horizontala

Reputation: 51

If someone else look this, had a problem like that.

I had an iframe whit an openstreet map, and i couldn't make it responsive. I finally put a "img-responsive" class and all was good. 

<iframe class="img-responsive" width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="YOUR OPENSTREET URL HERE" style="border: 1px solid black"></iframe>

Upvotes: 5

Remington Charles
Remington Charles

Reputation: 123

Smartik's answer works well.. I am using the gmaps4rails gem and applied these changes to the generated css like this:

.map_container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
display: block;
}

.gmaps4rails_map {
  display: block;
  height: 400px;
}

Then added these lines to my view:

<div class="map_container">
  <div id="map" class="gmaps4rails_map">
    <div id="map_canvas" class="span9">
      <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
    </div>
  </div> 
</div>

Upvotes: 0

Piet van Dongen
Piet van Dongen

Reputation: 1639

You could give the span6 class a width and height, then give map_canvas a width and height of 100%.

Upvotes: 0

Related Questions