показать / скрыть карту, начиная со скрытой карты (отображение: нет)

Question

Я не смог загрузить свою страницу со скрытой картой, которую я могу затем показать, нажав на: toggle_map_button

На мой взгляд кнопка Показать / Скрыть и карта:

 <%= 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 }) %>       

В моем файле CSS:

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

В моем файле RJS при действии: 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

Все работает отлично, если начать со страницы, показывающей карту. Действие переключателя устанавливает отображение: нет; правильно ...

Проблема возникает при запуске со скрытой карты и возможности щелкнуть и сдвинуть ее вниз.

Есть идеи?

Приветствия,

Joel

Answer 1

Посмотрите немного поближе на сгенерированный html, держу пари, он выглядит примерно так:

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

, поэтому адекватный рычаг CSS - класс map_container.Поместите display:none на него.

---

, поскольку visual_effect, похоже, требуется id, два варианта:

• переопределить частичное gmaps4rails

• оберните помощника gmaps в div: <div id="foo"> <%= gmaps(bar) %> </div>

---

У меня есть для вас другое решение, только что протестированный.

Вы были правы, говоря, что карта маленькая, когда скрыто видимое.

, поэтому добавьте опцию к вашему помощнику: <%= gmaps(whatever, :last_map => false)%>

Это не создаст карту, только загрузит ее объекты.

Затем добавьте немного JavaScript (я использую jQuery, но у вас есть идея):

<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

разрешено, спасибо @apneadiving предложению

добавлена ​​опция:

:complete => 'Gmaps.loadMaps();' to visual_effect

По виду:

<%= 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>