Hidden Google Maps

There are times when you want to hide a map and only show it when some event happens.

I'm using the awesome Gmaps4Rails gems to display my maps and pull the data with my RoR application.

Imagine you want to display a map on click only.

First, set the outer div to be hidden:

#map {
display: hidden;
}

Then, configure the "show-map-button" button to respond to the click event.

document.getElementById('show-map-button').onclick = function () {
  if ($("#map").is(":hidden"))
  {
    $("#map").slideDown("slow", function() {
        Gmaps.loadMaps();
        google.maps.event.trigger(Gmaps.map.map, 'resize');
  }
  else 
  {
    $("#city-map").slideUp("slow");
  }

};

Remember to change the map object to your object's name. (in my case, that's Gmaps.map.map)