javascript - Google Maps API - Mysterious White "Map" Popup Upon Loading

Question

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 use CodePen to show my problem. Just click on the second box from the left in the navigation bar at the bottom.

http://codepen.io/anon/pen/CDeBc

If this question was asked already I apologise; I was unable to find one with this issue.

I've been working on this for a while, and can't figure out what the problem is. Here's an image of what happens (sorry, I'm not allowed to post images; just links):

http://i.imgur.com/cH8uvLT.png

I've got the "map-canvas" set to a div that is originally hidden that shows on a button click and animates from scale(0) to scale(1).

Things I've tried:

• Removing the popup animation.
• Using absolute values (ex. 100px) for width and height. I currently use percentages.
• Calling my initMap() function after the div has animated and after the page loads.
• Having display: block initially rather than display: none. Also tried display: hidden.
• Triggering the 'resize' event.

The only thing I've found to work is if I have the map on a separate HTML page, which isn't what I want. You should also know that when it initially loads, the map is correct for ~500ms, then the white "Map" box pops up.

Here is the CSS and HTML markup of the map container, and the jQuery for showing it:

HTML:

<div class="content popout" id="content_2"></div>

CSS:

.content {
    width: 100%;
    height: auto;
    display: none;
    text-shadow: none;
}

/* Map */
#content_2 {
    background-color: red;
    height: 100%;
}

/* Animation for "popping" out an element. Pops out from the middle of the screen. */
.popout {
    animation-name: popout;
    animation-duration: 500ms;
    -webkit-animation-name: popout;
    -webkit-animation-duration: 500ms;
}

    @keyframes popout {
        from { transform: scale(0); opacity: 0; }
        to   { transform: scale(1); opacity: 1; }
    }

    @-webkit-keyframes popout {
        from { -webkit-transform: scale(0); opacity: 0; }
        to   { -webkit-transform: scale(1); opacity: 1; }
    }

jQuery:

// inside some function
$("#content_"+(i + 1).toString()).show();

if (i + 1 == 2) // #content_2
    initMap();
// end some function

function initMap() {
    mapOptions = {
        center: new google.maps.LatLng(42.9837, -81.2497),
        zoom: 12,
    };

    map = new google.maps.Map(document.getElementById("content_2"), mapOptions);
}

Any help is appreciated. Thank you.

Cohen

Answer 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 event
map.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