javascript - Google maps api not working properly -

so i'm playing around this example , our company has own api key google maps. co-worker , tried maps work - in full screen following code worked - mean let map scale full width of browser, code used is:

<script>     var map;      function initialize() {       var mapoptions = {         zoom: 8,         center: new google.maps.latlng(-34.397, 150.644),         maptypeid: google.maps.maptypeid.roadmap       };       map = new google.maps.map(document.getelementbyid('map-canvas'),           mapoptions);     }      google.maps.event.adddomlistener(window, 'load', initialize); </script>  <div id="map-canvas"></div> 

obviously no api key because that's loaded else where.

so decided add on this, because needed map stored else - , added jazz:

<style>     #map-canvas {         margin: 0;         padding: 0;         width: 100%;         height: 100%;     }      #map{         height: 350px;     } </style> 

the first 1 obvious, second 1 part of jquery-ui tab basically, tab, set it's height 350px

moving on - issue this:

if drop person on road get:

the "up close , personal" stalker goes full width , height far away directions map broken....

anyone know why?

i had same problem, half of map stayed grey colored(menas: unavailable state) whenever resized google maps container. solved triggering refresh event of google maps this

google.maps.event.trigger(map, "resize"); 

fyi: whenever change google maps height or width, better trigger resize event.

resize : developers should trigger event on map when div changes size: google.maps.event.trigger(map, 'resize').

you can check question here.

hope solves problem.