Google map API doesn't display correctly jQuery slideToggle

Question

I put Google Map inside a div, and made a slideToggle onto the div. the Google Map doesn\'t display correctly.

Answer 1

You could wait until the map is loaded by adding an event listener for idle. This event will fire once the map is fully loaded and ready.

google.maps.event.addListenerOnce(map, 'idle', function() {
    $('.hide').hide();
});

Here's the JSFiddle.

EDIT:

For anyone with a similar problem, here is the updated JSFiddle with the map positioned offscreen so it remains hidden without using display:none.