0

Hello I have this problem, when I load a page with a map that is in a hidden div the map loads just partially, top-left 1/4 of the map, how ever the map render well when it is loaded with the container not hidden.

I prepare this jsFiddle example page:

http://jsfiddle.net/Z5AGP/2/

$("#toggleAdvanced").click(function(){
    $("#advancedSearch").slideToggle( "fast", function() {
        google.maps.event.trigger(map, 'resize');
    });
});

if you try, click on the "Click" text, and you will see the map just partially loaded, how ever try changing the CSS from #map_wrapper { display: none; } to #map_wrapper { display: block; } and the map click hiden and show button works perfect.

And as you can see, Im triggering the google.maps.event.trigger(map, 'resize') event after the slide effect so it sould be working... (as told in other quetions I found)

what's wrong? or how can I solve this?

geocodezip
  • 158,664
  • 13
  • 220
  • 245
Dragnovich
  • 91
  • 1
  • 8

2 Answers2

2

you are calling your initialize function too early on a div that is not shown and this means that when the div gets shown by jquery that there is a conflict with this process and the map.

Check out the fiddle here. http://jsfiddle.net/Z5AGP/2/

$(document).ready(function() {


        $("#toggleMap").click(function(){
            $("#map_wrapper").slideToggle( "fast", function() {
                initialize();
                google.maps.event.trigger(map, 'resize');
            });
        });
    });
Daniel Jordan
  • 276
  • 1
  • 3
  • Ok now I see the map, after the "slide effect", how ever why did not work with the rezise event? and every time I click on the toggle button the map will be reinitialized is this correct use of that? I mean if I add dinamically some draggable markers, move them around and hide the map when I redisplay it al will be gone? or not? – Dragnovich Apr 27 '13 at 19:35
2

Thanks Daniel Jordan, I was right everything that was added dinamically was reset, after each div show/hide, to solve it I added a variable to check if the map was initializated already and now everithing is correct.

var mapInit = 0;
$(document).ready(function() {
    $("#toggleMap").click(function(){
        $("#map_wrapper").slideToggle( "fast", function() {
            if(mapInit == 0) { initialize(); mapInit = 1; }
            google.maps.event.trigger(map, 'resize');
        });
    });
});

That's the solution for this topic

How ever if the map was already initializated (as in the begining) why call to the event resize did not work? (this seems to be a bug, many other questions like this mention that the also call the event and nothing happened.

Regards

Dragnovich
  • 91
  • 1
  • 8