Slidetoggle Does Not Load Maps Correctly

Asked

Viewed 55 times

0

I have two maps on one page, I am using slideToggle and slideup to display make available for viewing only one map at a time. mapa_fixed and mapa_movement are the Ivs that contain the maps.

#mapa_fixo
{
    display:none;
}

#mapa_movimento
{
    display:none;
}


    function verifica_categoria_carrega_mapa(id)
    {

    var id_categoria = id;


    if(id==1)
    {

        if($("#mapa_fixo").is(":visible") == true)
        {
        }
        else
        {

            $("#mapa_fixo").slideToggle();
            $("#mapa_movimento").slideUp();
            return false;
        }
    }
    else if(id==2)
    {
        if($("#mapa_movimento").is(":visible") == true)
        {
        }
        else
        {

            $("#mapa_fixo").slideUp();
            $("#mapa_movimento").slideToggle();

            gmaps.refresh()

            return false;
        }

    }
}

It’s working, but, the maps are not being displayed correctly, due to jquery components one of the maps is loaded into a file. js the other directly on the page.

If loading the maps normally, without having Display:None, the maps normally load.

Fixed Map Mapa Fixo

Map Movement Mapa Movimento

javascript css google-maps

  • Are you using any external plugin to do this? The initial toggle state is closed?

  • For Toggle I am not using any plugin, initially I only set Divs as display:None, not referencing toggle. If you have another way to do this, even without using the toggle, it will be great.

  • Well, I had a similar problem, but in Angularjs (the code was a little different, I don’t know how to adapt to your model). The problem occurred because the map div started as display:none also. What I had to do was apply the map reset, which happens in the DOM load.

  • I started using the google.maps.event.addDomListener(window, 'load', initialize);, but, unsuccessfully, I saw something related to google.maps.event.addListenerOnce(map_rota, 'idle', function(), but, I did not find method to execute, knows something?

1 answer

0


Solved.

I started the maps without Display:None, and after a few seconds I apply the Display:None per function. Maps are already loaded and the problem no longer occurs

window.setTimeout(someFunction, 10000);
function someFunction()
{
    document.getElementById("mapa_fixo").style.display = "none";
    document.getElementById("mapa_movimento").style.display = "none";
}

Browser other questions tagged javascript css google-maps

You are not signed in. Login or sign up in order to post.