Google Maps API - Map not showing on second initialize - api

Question

I have a page setup that requires multiple instances of Google Maps via the API to be initialized. All works fine when one map is initialized the first time. When you re click on the button to do so, the map does not fully show.
var locations = [
['test1', 45.440188, -75.676309, 1, 'transportation.png'],
['test2', 45.439463, -75.675751, 1, 'medical.png'],
['test3', 45.439792, -75.683544, 1, 'schools.png'],
['test4', 45.439652, -75.676929, 1, 'shopping.png']
];
function initialize_1() {
var mapOptions = {
center: new google.maps.LatLng(45.438612, -75.677561),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas_1"), mapOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(45.438612, -75.677561),
map: map
});
var marker, i;
var iconBase = 'http://www.elkproperty.com/new/images/icons/';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
,icon: iconBase + locations[i][4]
});
}
}

Answer 1

I think the issue is that you are initialising map to a hidden layer. Try to move call to initialize_1() after show():
onclick="$('#units_1').hide(); $('#unitArrow_1').hide(); $('#amenity_1').show(); $('#amenityArrow_1').show(); initialize_1();"
Other option is to force resize event after divs are visible. For this to work you would probably have to make map variable global.
google.maps.event.trigger(map, 'resize');
Maybe unrelated to your question but do you have to initialise the map layer each time you show div with map? Maybe you could test whether it is initialised or not, for example:
var isInit_1 = false;
function initialize_1() {
if (isInit_1) { return; }
isInit_1 = true;
var mapOptions = {
...