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.

Answer 2

you need to wait until map finished render then you set hide a map because map div was toggle when div on hiding and that make map looking wrong location init function should look like this

function initialize() {
  var latlng = new google.maps.LatLng(48.89376,2.33742); 
    var settings = {
    zoom: 15,
      center: latlng,
      disableDefaultUI: true,
        zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"), settings);
  var marker=new google.maps.Marker({
    position:latlng,
  });

  marker.setMap(map);

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