放置在div内的Google地图不在位置

Question

Two important facts:

1. This is what I mean by 'out of position':

2. The div in question initially has style="display:none;" (it only shows when a link is clicked, JQuery solution). When that style is removed, the map works fine - however, I need that style because I can't allow that di> to show until the link is clicked (one of the links on the left in the screencap).

Can anyone suggest a way to make the map show properly?

If not, maybe you can suggest a way to make the di> show/hide when the links are clicked without having that style? Note that it is only one of seven divs that show/hide in the same way, so a solution would have to take that into account. This is the jQuery I'm using for each div (shows that div when link is clicked and hides all the others):

    <script type="text/javascript"> 
   $(function() {
       $('#show_mapa').click(function() {
           $('#mapa').show();
           $('#podaci').hide();
           $('#udaljenosti').hide();
           $('#pojedinosti').hide();
           $('#slika').hide();
           $('#slike').hide();
           $('#dodaj').hide();
           return false;
       });        
   });
</script>

Answer 1

When you initialize a google map inside a hidden div, this happens. You need to call a method on the map object after showing it to make it display correctly (onResize()).

how to deal with google map inside of a hidden div (Updated picture)

this might be of help.

Answer 2

I remember I had the same problem and actually used the same fix danp suggested that is found here: how to deal with google map inside of a hidden div (Updated picture)

This is an alternative: You can always add a listener to observe a click on a link, that's called "Show me the map" or something. Then when the link is clicked, only then load a google map within a seperate div.

Personally I like the show/hide way much better with the onResize() fix, but you can try the alternative if you want.

Good luck!