m4h6hw
Last Updated: February 25, 2016
·
933
· simaofreitas
Aab71fad681d14e042024468472a16eb

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)

Say Thanks
Respond