CODEWITHSUNDEEP
jquerygoogle-mapsslidetoggle
Dan
Dan

Reputation: 21877

Google map problem when hide and then toggle

I have a google map in my page. I set a button with 

.slideToggle()

functionality to show/hide the with the map and it do so. The problem is that I want to hide the map by default. If I use the display:none on the css, than after toggle up (show) the map, I don't see the markers that I put in it. Also, the map area seems much smaller than the area of its div. All of this doesn't happen if I load the page showing the map (display:block).

How can I start with hiding the map, and still be able to see it after toggle it?

Upvotes: 1

Views: 3058

Answers (2)

Repky
Repky

Reputation: 626

For others who still have this problem on api v3 use google.maps.event.trigger(your_map_name, 'resize'); which is equivalent to checkResize() method from api v2.

Upvotes: 2

Kokos
Kokos

Reputation: 9121

Your Google maps initialization should be in a function, if it's not make sure it is. Then you can only initialize the map after you toggle it, this will also make sure it doesn't get loaded if the user doesn't wish to see it.

function init_maps(){

    // google maps api goes here

}

var init = false;

$('.show_map').click(){

    if(!init){

        init_maps();
        init = true;

    }

    $('.map').slideToggle();

}

Upvotes: 1

Related Questions