Matthew Gifford

Ever try to put a Google map in a lightbox and end up with something that looks like this?

It seems like this would be a common problem with an easily-findable solution. But when this happened to me, I couldn’t find much about it. So, I’m going to do something about that with this post.

(I’m not saying that this is the best way to do it. Or even a good way. But it works.)

Here is the code for the page:

You can’t get much simpler.

After some searching, I discovered that the Google Maps script is unable to determine the dimensions of the <div> when its display is none. Setting the display to something other than none sort of defeats the purpose of a lightbox.

But there is another CSS property that controls whether you can see an element or not: visibility. I tend not to use it very much because a hidden element still takes up space in the page layout. The element still has dimensions. I normally don’t find this behavior useful. But in this case, it’s exactly what we need. The first thing we need to do is remove the display property and set visibility: hidden on #map.

This is probably going to mess with your layout. So, move #map to a place where the space it inhabits won’t be noticed. Right before </html> is probably a good choice. Now all we need to do is change display to none and visibility to visible a short time after the page loads.

This gives the map script enough time to see the dimensions of #map. And the user is unlikely to notice the switch in the page layout 0.5 seconds after the document ready event.

Now, when you reload the page and click on “view map”, it should look like this.

Here is the final code: