show/hide map, starting with a hidden map (display: none)

Question

I haven't been able to load my page with a hidden map that I can then Show clicking on :toggle_map_button

In my view a Show/Hide button and a map:

 <%= link_to_remote "Hide Map", :url =>{:action => :toggle_map}, :method => :get, :loading => visual_effect(:toggle_slide, "marketplace_map", :duration => 1, :queue => 'front'), :html => {:id => "toggle_map_button", :class => "toggle_map_button"} %>  

<%= gmaps(:map_options => {:detect_location => true, :center_on_user => true, :zoom => 6, :id => "marketplace_map" }, :markers => { "data" => @json }) %>       

In my CSS file:

#maketplace_map
{
   width: 100%;
   height: 400px;
   display: none; <= this doesn't get to be set (when I check in HTML code with Bugzilla)
}   

In my RJS file upon action :toggle_map:

page << "document.getElementById('toggle_map_button').innerHTML =(document.getElementById('toggle_map_button').innerHTML == 'Show Map' ? 'Hide Map' : 'Show Map')"

page.flash_msg(:notice_box, flash[:notice]) if flash[:notice]
page.flash_msg(:error_box, flash[:error]) if flash[:error]

flash.discard

The whole things works perfect when starting with a page showing the map. The toggle action does set display:none; correctly ...

The issue is comes when starting with a hidden map and be able to click and slide it down.

Any ideas?

Cheers,

Joel

Answer 1

Look bit closer at the html generated, I bet it's looking like:

<div class="map_container"> 
  <div id="marketplace_map" class="gmaps4rails_map"></div>
</div>

so the adequate CSS lever is the map_container class. Put display:none on it.

---

since visual_effect seems to need an id, two options:

• override the gmaps4rails partial

• wrap the gmaps helper in a div: <div id="foo"> <%= gmaps(bar) %> </div>

---

I've got another solution for you, just tested.

You were right saying the map is small when hidden the visible.

so add an option to your helper: <%= gmaps(whatever, :last_map => false)%>

This will not create the map, only load it's objects.

Then add some javascript (I use jQuery but you've got the idea):

<script>
var createMap = true;
$(function(){
  $("#click_me").click(function(){ 
  if (counter == true)
   {
    Gmaps.loadMaps(); //this will create the map
    counter = false;
   }
  $(".map_container").toggle();  // this hides and shows
  });
});
</script>