Bootstrap: Using Google Map With Fixed and Responsive Layouts

Question

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.

Answer 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%; }

Answer 2

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>