gmaps with fancybox isnt displaying properly the second time around

I'm experiencing some really strange behavior and cant figure out why... I have a link to a location which I call using fancybox:

  $(".location_modal").fancybox();  

The code to display the location looks like this:

<d开发者_如何学Pythoniv class="event_identifier">
  <div id="map_canvas" style="width:960px;height:500px;"></div>
</div>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $("#map_canvas").gmap3();
  });
</script>

The first time I click on the link, it loads great: http://cl.ly/3X1h1j031W0S0b0t1A3K After I close the fancybox and click on the same link again, I get the following: http://cl.ly/2J1B2G3W1L1i3i033v1X. The map canvas is the same size but the map itself isnt displaying properly.

I tried this without the fancybox and it seems to work well, so I think it might be a conflict of sorts. I'm using the latest version of gmap3 (3.3), jquery 1.5.2 and fancybox 1.3.4.

Thanks!

---

The Google maps is probably getting confused by the fact that its creating and setting up itself and then you delete it and when its recreated it thinks it doesnt need to re-create itself due to variables still being in memory.

Try instead as a lot of people do is to put the map within a seperate iFrame.