How to preinitiate maps if they are hidden with hide()

[Jirka1111]

Hello, gem works great, but I have map in hidden element and after I click on visible button, map does not show.

$(document).ready(function(){
  var handler = Gmaps.build('Google');
  handler.buildMap({ internal: {id: 'multi_markers'}}, function(){
    var markers = handler.addMarkers([
      { lat: 43, lng: 3.5},
      { lat: 45, lng: 4},
      { lat: 47, lng: 3.5},
      { lat: 49, lng: 4},
      { lat: 51, lng: 3.5}
    ]);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });

  $("#hidden-element").hide();
  $("#btn-toggle").click(function(){
    $("#hidden-element").toggle(500);
  });
});

If I remove $("#hidden-element").hide();, everything works just fine.

Any suggestions?

Thanks in advance.

[apneadiving]

You should create the map when you first make the element visible.

On 15 Jul 2016, at 16:18, Jirka1111 [email protected] wrote:

Hello, gem works great, but I have map in hidden element and after I click on visible button, map does not show.

$(document).ready(function(){ var handler = Gmaps.build('Google'); handler.buildMap({ internal: {id: 'multi_markers'}}, function(){ var markers = handler.addMarkers([ { lat: 43, lng: 3.5}, { lat: 45, lng: 4}, { lat: 47, lng: 3.5}, { lat: 49, lng: 4}, { lat: 51, lng: 3.5} ]); handler.bounds.extendWith(markers); handler.fitMapToBounds(); });

$("#hidden-element").hide(); $("#btn-toggle").click(function(){ $("#hidden-element").toggle(500); }); }); If I remove $("#hidden-element").hide();, everything works just fine.

Any suggestions?

Thanks in advance.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[Jirka1111]

That is exactly how I do it. I have rewrited my code but still without luck:

$(document).ready(function(){

  function showMap(){
    var handler = Gmaps.build('Google');
      handler.buildMap({ internal: {id: 'multi_markers'}}, function(){
        var markers = handler.addMarkers([
          { lat: 43, lng: 3.5},
          { lat: 45, lng: 4},
          { lat: 47, lng: 3.5},
          { lat: 49, lng: 4},
          { lat: 51, lng: 3.5}
        ]);
        handler.bounds.extendWith(markers);
        handler.fitMapToBounds();
      });
  }

  $("#hidden-element").hide();
  $("#btn-toggle").click(function(){
    $("#hidden-element").toggle(1000);
    if ($('#hidden-element').is(':visible')){
      showMap();
    }

    $("i", this).toggleClass("fa fa-chevron-down fa fa-chevron-up");

    $('html, body').animate({
        scrollTop: $("#full-width-panel").offset().top
    }, 500);
  });
});

As you can see, I create map after i set visibility by toggle.

[Jirka1111]

Nobody knows? I think that I do everything just fine.

[Jirka1111]

So it is not an error. I think Gmaps4Rails don't know the precise position of the element when element is showing up. So you have to ensure that element is fully visible and then show the map:

$("#hidden-element-destinations").toggle(1000).promise().done(function(){
      if ($('#hidden-element-destinations').is(':visible')){
        showMap();
      }
});

This basically means that maps will load after element is fully visible and took his place on screen.

Thanks apneadiving for such a great library.