This is because you have the map div inside another div with style="display:none"... The google maps can't position properly with display none... A solution I've found for rendering a map that isn't displayed is to use style="display:block;position:absolute;visibility:hidden" when loading the page and then you can change it back to style="display:none;position:static;visibility:visible" after the map has loaded.