Now You See It Now You Don't

Posted: 24/08/10

Google Map Misaligned

A client of mine has come up with a design for their new website. One of the required features for the site was the display of a Google map, on demand when a link or button was clicked, so as not to bother their audience with superfluous information unnecessarily.

This sounded like a trivial job for the jQuery javascript library, which makes this sort of animation a snap and gets around the vast majority of cross browser compatibility issues. Obtaining the map code from Google is trivial, however embedding it in a hidden <iframe> proved rather interesting.

The problem is that because the <iframe> has no width or height when it is hidden (using display:none as opposed to visibility:hidden, which merely leaves a large blank space), the Google map code is unable to centre the map correctly.

After a bit of thought, I came up with the following solution:

$('#clickme').click(function(e) {
      e.preventDefault();
      ${'#clickme').fadeOut(1000,showmap);
})
function showmap() {
      $('#iframe').show(1000,fillmap);
}
function fillmap(){
      $('#iframe').attr('src','http://maps.google.co.nz/maps?q=4+Reilly+Avenue&output=embed');
}

The solution is to fadeout the "click for map" link, fade in the iframe and once the iframe has become visible and thus has a height and width, manipulate the "src" attribute.