show/hide map, starting with a hidden map (display: none) - ruby-on-rails

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>

Answer 2

resolved it thx to #apneadiving suggestion
added option:
:complete => 'Gmaps.loadMaps();' to visual_effect
In the view:
<%= link_to_remote "Show Map",
:url =>{:action => :toggle_map},
:method => :get,
:loading => visual_effect(:toggle_slide, "map", :duration => 1, :queue => 'front'),
:complete => 'Gmaps.loadMaps();',
:html => {:id => "toggle_map_button", :class => "toggle_map_button"} %>
<div id="map" style="display:none;" >
<%= gmaps(:map_options => {:detect_location => true, :center_on_user => true, :zoom => 6, :id => "marketplace_map", :last_map => false }, :markers => { "data" => #json }) %>
</div>