CODEWITHSUNDEEP
twitter-bootstrap
Why Not
Why Not

Reputation: 611

Bootstrap: Using Google Map With Fixed and Responsive Layouts

I'm trying to place a Google Map within a Boostrap layout, using a fixed width on a traditional web page and using a responsive layout when viewed on a mobile device.

I've read how Google Maps pose a problem with the Bootstrap layout and the fixes available. I used this snippet of code, which was listed as a fix on several sites:

#map_canvas label { width: auto; display:inline; }
#map_canvas img { max-width: none; max-height: none; }

This works for a fixed layout, but does not provide any responsiveness when viewed on a mobile device.

Is there any way to achieve both of these goals while using Bootstrap? Any insight or experience shared is greatly appreciated.

Upvotes: 3

Views: 27565

Answers (4)

Evil.affy
Evil.affy

Reputation: 31

use it. it works for me. hope it will fix your problem too

    <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheigh
    t="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q
    &amp;hl=en&amp;geocode=&amp;q=Littlehampton,+UK&amp;aq=0&amp;oq=little&amp;s
    ll=53.800651,-4.064941&amp;sspn=20.121063,44.384766&amp;ie=UTF8&amp;hq=&amp;
    hnear=Littlehampton,+West+Sussex,+United+Kingdom&amp;t=m&amp;ll=50.811033,-0
    .538673&amp;spn=0.018982,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed">
    </iframe>

Upvotes: 3

Evan Carroll
Evan Carroll

Reputation: 1

You don't wan't max-width as @matt suggested, but he's on the right track. The fluid columns set the relative size. Google is already setting the size in the frame, you want to override that to the greatest size your grid permits; you want regular width.

iframe, object, embed { width: 100%; }

I'd suggest putting it in a div called #gmap and being more reasonable though,

#gmap iframe, #gmap object, #gmap embed { width: 100%; }

Upvotes: 5

matt
matt

Reputation: 1025

Actually if your just using the google maps IFRAME embed you can make it responsive by simply adding this to your CSS (assuming your not using any other iframes:

iframe, object, embed{max-width: 100%;}

If your container/theme is responsive this will work great.

Upvotes: 0

DaveP
DaveP

Reputation: 568

The technique described at http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio works well.

Just replace 'some text' in the example given there with the Google map code.

Upvotes: 0

Related Questions