After struggling with this, I ended up using the Google static map and
using the "size" query string parameter. I calcualte it on the fly with:
var width = window.innerWidth - 80;
and set *size=width*.
While it resizes as you resize the browser window, the correct size is only
set on initial page load.
On Tuesday, June 19, 2012 12:36:44 PM UTC-7, DF wrote:
>
> 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.
>
