Using Objective HTMLs "Google Maps for ExpressionEngine" we can get the 3 maps from this query to show:

{exp:channel:entries channel="events" orderby="events_start_date" sort="desc"}
    {if count == 1}
    {exp:gmap:init id="map{entry_id}" class="google-maps" style="width:100%;height:380px" scrollwheel="false"} 
    {exp:gmap:marker id="map{entry_id}" latitude="{events_map_latitude_field}" longitude="{events_map_longitude_field}" zoom="16"}
    {if:else}
    {exp:gmap:init id="map{entry_id}" class="google-maps" style="width:100%;height:380px" scrollwheel="false" script_tag="false"}
    {exp:gmap:marker id="map{entry_id}" latitude="{events_map_latitude_field}" longitude="{events_map_longitude_field}" zoom="16"}
    {/if} 
{/exp:channel:entries}

The maps are in a div that uses jquery show/hide and the maps only show the first tile and the map is not centred correctly. If the show/hide is disabled the maps render correctly.

Can the map area be responsive to work with Twitter Bootstrap?

Is there a way to overcome this issue with maps and jquery?