Google map out of position when placed inside div

Question

Two important facts:

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

enter image description here

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>

score 4 · Accepted Answer · edited May 23 '17 at 12:07

4

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.

edited May 23 '17 at 12:07

Community

1
1

answered Dec 14 '11 at 16:23

danp

14,876
6
42
48

2

Thanks but I solved it myself. Removing the style from the div tag and instead calling a javascript function onLoad that does the same thing (document.getElementById('mapa').style.display = 'none';) and it works now. Not the most elegant solution, but I don't have time for elegance at the moment. – robert Dec 14 '11 at 16:27

score 1 · Answer 2 · edited May 23 '17 at 12:07

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!

Google map out of position when placed inside div

2 Answers2