Google maps API embedded in iFrame not centering on lat/long

Question

I have used the Google Maps API to create a simple HTML page which I'm then embedding into an iFrame on another page.

Page works fine when outside of the iFrame however when within the iFrame, the window position doesn't scroll to center on the marker.

An example is here: http://webfe.omega.studiocoast.com.au/epping-club.aspx and click on club location.

On reading this I'm wondering why I'm using a iFrame and instead call the API directly from the parent page...

But any suggestions as to my first problem would be fantastic :)

Answer 1

Thats because you are embedding http://webfe.omega.studiocoast.com.au/media/Assets/Maps/EppingMap.html into an iframe that does not fit the whole screen (you are actually cutting the image and only showing the right corner of the map).. I would rather embed the map directly from google as you can copy the map in the exact size you want..

If you want to do it your way I would suggest you take a look at the javascript found when embedding directly from google..

Open this link in firefox and use firebug to analyze it.. then I guess you will find what you need.

http://maps.google.no/maps/empw?url=http:%2F%2Fmaps.google.no%2F%3Fie%3DUTF8%26ll%3D61.143235,9.09668%26spn%3D14.594437,39.506836%26z%3D5%26output%3Dembed&hl=no&gl=no

Answer 2

After much searching I found the issue was related to the iFrame being embedded inside a jQuery accordion. It rendered correctly initially when the accordion was rolled up by however when it was rolled down, the map position was thrown out.

Managed to fix the marker location by creating a new event which fired out when the accordion rolled down which re-rendered the iFrame and map position.