Google Maps Api - Mysterious White "map" Popup Upon Loading

UPDATE2: Found the problem. I had * { width: 100%; height: 100% } at the top of my CSS file. This screwed up the entire map. Removing this solved the problem. UPDATE: I was able to

Solution 1:

You need to trigger resize event on the map once you are done with the animations. Also if you have used a center in your map, then this code will be helpful:

var currCenter = map.getCenter(); //Gets you the center of the map
google.maps.event.trigger(map, 'resize'); // Trigger the resize eventmap.setCenter(currCenter); //Apply the new center 

Make sure you use this code after your animation is done and the map object is initialized. If the map is not initialized then you have to reinitialize it again using your code :

map = new google.maps.Map(elem, mapOptions);

where elem is your map-canvas element. Try this.

Update: : well not exactly the solution but a hack to solve your issue.

#content_2.gm-style>div:first-child{z-index:initial!important;}

Add above css in your style.

You should look more deeply into the code about the issues. :) Codepen Update: http://codepen.io/anon/pen/pcwir