Google Maps and jQuery Fade / Slide

Envato Authors Theme Authors
1

Hey guys,

having an issue with Google Maps display incorrectly while fading in / sliding it with jQuery. Is there an easy fix?

Thanks in advance.

2

If you mean the map originally loads while its container is hidden, and then when it is revealed the maps is displaying incorrectly, what you need to do is add a callback to resize and recenter the map the first time it is revealed.

Basically, set a callback for your show event that calls

function(){
  google.maps.event.trigger(map, "resize");
  map.setCenter(latlng);
}

You’ll need to have the map object to manipulate of course, which means you’ll want to draw the map via the API if you’re not already :slight_smile:

3

Thanks! Will give it a try.