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?
