Question

I’m having a problem with an iframed Google map. Basically, the position is incorrect, but not always. I think the problem may have something to do with the fact that the map is in a hidden div, which is displayed later.

Can anyone verify that this is indeed a problem, or propose a solution to this? I do not have much control over the map, as it is iframed from somewhere else.

I’ve tried to give the iframe an ID, which I then target with google.maps.event.trigger(map, "resize"); on the function that reveals the parent container, but to no avail.

EDIT
As requested, here’s the map:

<iframe width="450" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=56.084298,11.074219&amp;z=6&amp;output=embed"></iframe>

As you can see, there’s nothin special about it. It’s supposed to show Denmark, but it some times show Germany and Poland instead. I’m sure those are nice places, but the client see little use of it.

Answer 1

I also can confirm this problem. I don’t think it is related to your hidden div, as I have the issue with fixed elements too.

The problem is that the place you want the map to center on ends up in the top left corner of the iframe for some reason. I think it’s because on google’s side the map resize event is firing too early before it knows the full size of the iFrame.

Try this, so far it works for me:

1. Remove the iframe src tag.

2. Embed the below javascript code somewhere below the iframe:

   <script type='text/javascript'>
       jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc....");
   </script>
   

Because it loads the map after the iframe is there. If I still have problems in the future I’ll try adding a short delay to the above code, making it run after document load.