Double googlemap stability issue

I am putting together a clients contact us page and I need to have two Google maps on it.

The first map is a small version of the second. The second map opens up in a lightbox activated by a link beneath the first.

The issue is, the large map goes wrong when I attempt to open it. I开发者_如何学Python typically get one tile in the top left hand corner and nothing more.

You can see for yourself at http://test2omniforce.co.uk/node/8. It's some kind of conflict between the two because if I remove the small map, the larger map works fine.

I am trying to determine why this happens, and how I can fix it.

OS: Here's my code for the large map (the small map code is exactly the same except instead of map_canvas, it uses map_canvas2).

var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
        var myOptions = {
          zoom: 15,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel:false
        }
        
        var map     =   new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'we are right here ...'
         });
         
        var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);

      marker.setMap(map);
      
      google.maps.event.addListener(marker, 'click', function(){
        infowindow.open(map, marker);
      });

Inspired by @rggardner's suggestion, I made the small map a static map. I had no idea those existed before.

That removes the conflict and the large map now plays nice.

@rggardner, thank you very much!